src/index.html.in: reduce the LCM of the bus/tram/train loops

[charm-bypass.git] / src / index.html.in

diff --git a/src/index.html.in b/src/index.html.in
index ee40cf8f18a76fd260c2fe325df2776c7786f3cc..755f54020592ab630097dcaa7e4973f8aa47020d 100644 (file)
--- a/src/index.html.in
+++ b/src/index.html.in
@@ -58,17 +58,107 @@
       /************************/
       /* Scrolling animations */
       /************************/
+
+      /* Bus */
       @keyframes busroll {
        from {
-         transform: translate(0%, 0%);
+         transform: translateX(0%);
        }
        to {
-         transform: translate(100%, 0%);
+         transform: translateX(100%);
        }
       }
 
       #bus {
-       animation: busroll 15s linear infinite;
+       animation: busroll 23s linear infinite;
+      }
+
+
+      /* Tram */
+      @keyframes tramroll {
+       from {
+         transform: translateX(0%);
+       }
+       to {
+         transform: translateX(100%);
+       }
+      }
+
+      #tram {
+       animation: tramroll 17s linear infinite;
+      }
+
+
+      /* Tram */
+      @keyframes trainroll {
+       from {
+         transform: translateX(0%);
+       }
+       to {
+         transform: translateX(100%);
+       }
+      }
+
+      #train {
+       animation: trainroll 11s linear infinite;
+      }
+
+
+      /* Clouds */
+      @keyframes cloudsfloat {
+       from {
+         transform: translateX(0%);
+       }
+       to {
+         transform: translateX(-50%);
+       }
+      }
+
+      #clouds {
+       animation: cloudsfloat 40s linear infinite;
+      }
+
+      @keyframes cloudscopyfloat {
+       from {
+         transform: translateX(0%);
+       }
+       to {
+         transform: translateX(-50%);
+       }
+      }
+
+      #cloudscopy {
+       animation: cloudscopyfloat 40s linear infinite;
+      }
+
+
+      /* Trees */
+      @keyframes treespass {
+       from {
+         transform: translateX(0%);
+       }
+       to {
+         transform: translateX(-50%);
+       }
+      }
+
+      #trees {
+        /* The trees move a little faster than the clouds */
+       animation: treespass 30s linear infinite;
+      }
+
+      @keyframes treescopypass {
+       from {
+         transform: translateX(0%);
+       }
+       to {
+         transform: translateX(-50%);
+       }
+      }
+
+      #treescopy {
+        /* The trees move a little faster than the clouds */
+       animation: treescopypass 30s linear infinite;
       }
     </style>
   </head>