X-Git-Url: http://gitweb.michael.orlitzky.com/?a=blobdiff_plain;f=src%2Findex.html.in;h=d6f421324f24046eb2b9c84a7453dcedd13c1dd2;hb=35c66eb095991794438b19198f04b97e48f39fc0;hp=271651099a79f6d1c907f92caf0d5f9c6021579d;hpb=f74682c5ed759123da496f43000835d1b3cbc05f;p=charm-bypass.git

diff --git a/src/index.html.in b/src/index.html.in
index 2716510..d6f4213 100644
--- a/src/index.html.in
+++ b/src/index.html.in
@@ -55,6 +55,96 @@
         font-family: "CharmBypass Ticket Text" !important;
       }
 
+      /************************/
+      /* Scrolling animations */
+      /************************/
+
+      /* Bus */
+      @keyframes busroll {
+	from {
+	  transform: translateX(0%);
+	}
+	to {
+	  transform: translateX(100%);
+	}
+      }
+
+      #bus {
+	animation: busroll 20s linear infinite;
+      }
+
+
+      /* Tram */
+      @keyframes tramroll {
+	from {
+	  transform: translateX(0%);
+	}
+	to {
+	  transform: translateX(100%);
+	}
+      }
+
+      #tram {
+	animation: tramroll 15s 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>