}
.itemlist .list img {
- width: 1000%; height: 11em;
+ -width: 1000%; height: 11em;
max-width: unset;
background-color: #111;
- object-fit: contain;
- transform: translate(-00%, 0);
+ object-fit: cover;
+ transform: translate(-05%, 0);
+ margin-left: 50%;
}
-.itemlist .list img:hover {
- animation-name: thumbscroll;
- animation-duration: 10s;
- animation-iteration-count: infinite;
+.itemlist .list:hover img {
+ animation: thumbscroll 8s steps(10, end) infinite;
}
@keyframes thumbscroll {
- 0% { transform: translate(-00%, 0); }
- 9.9% { transform: translate(-00%, 0); }
- 10% { transform: translate(-10%, 0); }
- 19.9% { transform: translate(-10%, 0); }
- 20% { transform: translate(-20%, 0); }
- 29.9% { transform: translate(-20%, 0); }
- 30% { transform: translate(-30%, 0); }
- 39.9% { transform: translate(-30%, 0); }
- 40% { transform: translate(-40%, 0); }
- 49.9% { transform: translate(-40%, 0); }
- 50% { transform: translate(-50%, 0); }
- 59.9% { transform: translate(-50%, 0); }
- 60% { transform: translate(-60%, 0); }
- 69.9% { transform: translate(-60%, 0); }
- 70% { transform: translate(-70%, 0); }
- 79.9% { transform: translate(-70%, 0); }
- 80% { transform: translate(-80%, 0); }
- 89.9% { transform: translate(-80%, 0); }
- 90% { transform: translate(-90%, 0); }
- 100% { transform: translate(-90%, 0); }
+ from { transform: translate(-05%, 0);}
+ to { transform: translate(-105%, 0);}
}
.itemlist .list label {