Make the stripes move

Works on browsers that support CSS @Property. Gracefully degrades on
those that don't.

style.css

@@ -2,28 +2,46 @@
   --logo-width: 10rem;
 }
 
+@property --red-stripe-index {
+  syntax: "<number>";
+  initial-value: 0;
+  inherits: false;
+}
+
 html,
 body {
   height: 100%;
 }
 
 body {
   --stripes-width: 3rem;
+
   margin: 0;
   font-family: "Comic Sans", "Impact", sans-serif;
   background: repeating-linear-gradient(
     -45deg,
-    #d23f45aa,
-    #d23f45aa calc(1 * var(--stripes-width)),
-    #d9a638aa calc(1 * var(--stripes-width)),
-    #d9a638aa calc(2 * var(--stripes-width)),
-    #92a678aa calc(2 * var(--stripes-width)),
-    #92a678aa calc(3 * var(--stripes-width)),
-    #798889aa calc(3 * var(--stripes-width)),
-    #798889aa calc(4 * var(--stripes-width)),
-    #87485faa calc(4 * var(--stripes-width)),
-    #87485faa calc(5 * var(--stripes-width))
+    #d23f45aa calc(var(--red-stripe-index) * var(--stripes-width)),
+    #d23f45aa calc(calc(var(--red-stripe-index) + 1) * var(--stripes-width)),
+    #d9a638aa calc(calc(var(--red-stripe-index) + 1) * var(--stripes-width)),
+    #d9a638aa calc(calc(var(--red-stripe-index) + 2) * var(--stripes-width)),
+    #92a678aa calc(calc(var(--red-stripe-index) + 2) * var(--stripes-width)),
+    #92a678aa calc(calc(var(--red-stripe-index) + 3) * var(--stripes-width)),
+    #798889aa calc(calc(var(--red-stripe-index) + 3) * var(--stripes-width)),
+    #798889aa calc(calc(var(--red-stripe-index) + 4) * var(--stripes-width)),
+    #87485faa calc(calc(var(--red-stripe-index) + 4) * var(--stripes-width)),
+    #87485faa calc(calc(var(--red-stripe-index) + 5) * var(--stripes-width))
   );
+  animation: moveStripes 1s linear 0s infinite;
+}
+
+@keyframes moveStripes {
+  from {
+    --red-stripe-index: 0;
+  }
+
+  to {
+    --red-stripe-index: -5;
+  }
 }
 
 .container {
@@ -41,6 +59,7 @@ body {
 .logo {
   width: var(--logo-width);
   position: absolute;
+  z-index: 420;
   animation:
     moveX 7s linear 0s infinite alternate,
     moveY 12s linear 0s infinite alternate,
@@ -69,11 +88,11 @@ body {
 }
 
 @keyframes rotate {
-  0% {
+  from {
     transform: rotate(0deg);
   }
 
-  100% {
+  to {
     transform: rotate(360deg);
   }
 }