simplified animation stepping

[serve0] / style.css

diff --git a/style.css b/style.css
index 7eda95c5701b7c81969e216a6352f720e3d21220..dd67361b51d8d14d09e9bb3ecdb6cd21e3c50368 100644 (file)
--- a/style.css
+++ b/style.css
@@ -67,31 +67,11 @@ body {
   margin-left: 50%;
 }
 .itemlist .list:hover img {
-  animation-name: thumbscroll;
-  animation-duration: 10s;
-  animation-iteration-count: infinite;
+  animation: thumbscroll 8s steps(10, end) infinite;
 }
 @keyframes thumbscroll {
-   0%    { transform: translate(-05%, 0); }
-   9.99% { transform: translate(-05%, 0); }
-  10%    { transform: translate(-15%, 0); }
-  19.99% { transform: translate(-15%, 0); }
-  20%    { transform: translate(-25%, 0); }
-  29.99% { transform: translate(-25%, 0); }
-  30%    { transform: translate(-35%, 0); }
-  39.99% { transform: translate(-35%, 0); }
-  40%    { transform: translate(-45%, 0); }
-  49.99% { transform: translate(-45%, 0); }
-  50%    { transform: translate(-55%, 0); }
-  59.99% { transform: translate(-55%, 0); }
-  60%    { transform: translate(-65%, 0); }
-  69.99% { transform: translate(-65%, 0); }
-  70%    { transform: translate(-75%, 0); }
-  79.99% { transform: translate(-75%, 0); }
-  80%    { transform: translate(-85%, 0); }
-  89.99% { transform: translate(-85%, 0); }
-  90%    { transform: translate(-95%, 0); }
- 100%    { transform: translate(-95%, 0); }
+  from { transform: translate(-05%, 0);}
+  to   { transform: translate(-105%, 0);}
 }
 
 .itemlist .list label {