X-Git-Url: http://gitweb.michael.orlitzky.com/?a=blobdiff_plain;f=src%2Findex.html.in;h=755f54020592ab630097dcaa7e4973f8aa47020d;hb=074c0ed9403a1b4803558310c0f696acb99a7507;hp=5ef681b99f702ca8efd8f987450d75ec8528e29b;hpb=f3116551d31e18e0efb9fa72ea116ea455c2ac58;p=charm-bypass.git

diff --git a/src/index.html.in b/src/index.html.in
index 5ef681b..755f540 100644
--- a/src/index.html.in
+++ b/src/index.html.in
@@ -58,32 +58,53 @@
       /************************/
       /* Scrolling animations */
       /************************/
+
+      /* Bus */
       @keyframes busroll {
 	from {
-	  transform: translate(0%, 0%);
+	  transform: translateX(0%);
 	}
 	to {
-	  transform: translate(100%, 0%);
+	  transform: translateX(100%);
 	}
       }
 
       #bus {
-	animation: busroll 20s linear infinite;
+	animation: busroll 23s linear infinite;
       }
 
+
+      /* Tram */
       @keyframes tramroll {
 	from {
-	  transform: translate(0%, 0%);
+	  transform: translateX(0%);
 	}
 	to {
-	  transform: translate(100%, 0%);
+	  transform: translateX(100%);
 	}
       }
 
       #tram {
-	animation: tramroll 15s linear infinite;
+	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%);
@@ -109,6 +130,36 @@
       #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>