fertig

css/style.css

@@ -5,7 +5,7 @@ header {
 }
 
 .pixel-horse-container {
-    width: 100px;
+    width: 240px;          /* Pferd + je 70px Landschaft links und rechts */
     height: 100px;
     position: relative;
     margin: 0 auto;   /* zentriert im Header */
@@ -18,23 +18,24 @@ header {
     position: absolute;
     top: 0;
     left: 0;
-    width: 100px;
+    width: 240px;
     height: 100px;
     opacity: 0;
-    animation: run 0.5s steps(1) infinite;
+    animation: run 1s steps(1) infinite;   /* 8 Frames, 125ms pro Frame */
 }
 
 .pixel-horse:nth-child(1) { animation-delay: 0s; opacity: 1; }
-.pixel-horse:nth-child(2) { animation-delay: 0.125s; }
-.pixel-horse:nth-child(3) { animation-delay: 0.25s; }
-.pixel-horse:nth-child(4) { animation-delay: 0.375s; }
+.pixel-horse:nth-child(2) { animation-delay: .125s; }
+.pixel-horse:nth-child(3) { animation-delay: .25s; }
+.pixel-horse:nth-child(4) { animation-delay: .375s; }
+.pixel-horse:nth-child(5) { animation-delay: .5s; }
+.pixel-horse:nth-child(6) { animation-delay: .625s; }
+.pixel-horse:nth-child(7) { animation-delay: .75s; }
+.pixel-horse:nth-child(8) { animation-delay: .875s; }
 
 @keyframes run {
-    0%, 24.9% { opacity: 1; }
-    25%, 49.9% { opacity: 0; }
-    50%, 74.9% { opacity: 1; }
-    75%, 99.9% { opacity: 0; }
-    100% { opacity: 1; }
+    0%, 12.4% { opacity: 1; }
+    12.5%, 100% { opacity: 0; }
 }
 
 /* ================================================================