Resoved a couple cross-browser compatibility issues.

README.markdown

@@ -8,6 +8,10 @@ If so, then never fear --- CSS is here! Using modern CSS techniques like animati
 
 ### [See them here!](http://bryanbraun.github.io/after-dark-css/)
 
+#### Browsers
+
+These animations will only work in modern browsers. They have been tested in Chrome, Safari, & Firefox.
+
 #### Why?
 
 Just for fun. 

base.css

@@ -18,6 +18,7 @@ body {
   margin: 0;
   height: 100%;
   font-family: 'ChicagoFLF', 'Times New Roman', 'Georgia', serif;
+  overflow: hidden;
 }
 
 /* Hide only visually, but have it available for screenreaders & for SEO purposes. See h5bp.com/v */

fish.html

@@ -268,7 +268,13 @@
         -o-transform: rotateY(180deg);
         transform: rotateY(180deg);
       }
-      52% { -webkit-transform: rotateY(0deg); }
+      52% {
+        -webkit-transform: rotateY(0);
+        -moz-transform: rotateY(0);
+        -ms-transform: rotateY(0);
+        -o-transform: rotateY(0);
+        transform: rotateY(0);
+      }
       100% { left: 110%; }
     }
     @-moz-keyframes rtl {
@@ -288,7 +294,13 @@
         -o-transform: rotateY(180deg);
         transform: rotateY(180deg);
       }
-      52% { -webkit-transform: rotateY(0deg); }
+      52% {
+        -webkit-transform: rotateY(0);
+        -moz-transform: rotateY(0);
+        -ms-transform: rotateY(0);
+        -o-transform: rotateY(0);
+        transform: rotateY(0);
+      }
       100% { left: 110%; }
     }
     @-o-keyframes rtl {
@@ -308,7 +320,13 @@
         -o-transform: rotateY(180deg);
         transform: rotateY(180deg);
       }
-      52% { -webkit-transform: rotateY(0deg); }
+      52% {
+        -webkit-transform: rotateY(0);
+        -moz-transform: rotateY(0);
+        -ms-transform: rotateY(0);
+        -o-transform: rotateY(0);
+        transform: rotateY(0);
+      }
       100% { left: 110%; }
     }
     @keyframes rtl {
@@ -328,7 +346,13 @@
         -o-transform: rotateY(180deg);
         transform: rotateY(180deg);
       }
-      52% { -webkit-transform: rotateY(0deg); }
+      52% {
+        -webkit-transform: rotateY(0);
+        -moz-transform: rotateY(0);
+        -ms-transform: rotateY(0);
+        -o-transform: rotateY(0);
+        transform: rotateY(0);
+      }
       100% { left: 110%; }
     }
     

index.html

@@ -25,7 +25,7 @@
     .title {
       text-align: center;
       font-size: 12px;
-      letter-spacing: -1px;
+      font-weight: normal;
       padding: 1px 0;
       margin: 1px 0 0 0;
       border-bottom: 1px solid #111;

messages.html

@@ -20,7 +20,6 @@
     font-size: 20px;
     color: white;
     position: absolute;
-    
   }
   
   /* Marquee Animation */

messages2.html

@@ -10,7 +10,7 @@
   /* ball styling */
   .message {
     display: block;
-    width: 462px;
+    width: 467px;
     margin: 0;
     color: white;
     position: absolute;
@@ -25,16 +25,16 @@
   /* animation keyframes */
   @-webkit-keyframes moveX {
     /* screen width - width of message */
-    from { left: 0; } to { left: calc(100% - 460px); }
+    from { left: 0; } to { left: calc(100% - 467px); }
   }
   @-moz-keyframes moveX {
-    from { left: 0; } to { left: calc(100% - 460px); }
+    from { left: 0; } to { left: calc(100% - 467px); }
   }
   @-o-keyframes moveX {
-    from { left: 0; } to { left: calc(100% - 460px); }
+    from { left: 0; } to { left: calc(100% - 467px); }
   }
   @keyframes moveX {
-    from { left: 0; } to { left: calc(100% - 460px); }
+    from { left: 0; } to { left: calc(100% - 467px); }
   }
   @-webkit-keyframes moveY {
     from { top: 0; } to { top: calc(100% - 26px); }