CSS3 animation

PascalPixel · PascalPixel · commit db113adbacb7 · 2014-01-14T15:24:03.000+01:00
diff --git a/index.html b/index.html
@@ -94,15 +94,21 @@
         height: 400px;
         overflow: hidden;
       }
-      .browser-content iframe {
-        border: none;
-        position: absolute;
-        width: 100%;
-        height: 2000px;
-      }
       .browser-reload {
         font-weight: bold;
       }
+      .css3-browser {
+      position:absolute;
+      top:0;
+      border: none;
+      position: absolute;
+      width: 100%;
+      height: 3000px;
+      transition: top 240s;
+      }
+      .css3-browser.moving{
+      top:-3000px;
+      }
     </style>
   </head>
   <body>
@@ -115,17 +121,15 @@
         </div>
       </div>
       <div class="browser-content">
-        <iframe id="css-browser" name="iframe" src="http://www.polygon.com/"></iframe>
+        <iframe class="css3-browser" name="iframe" src="http://www.polygon.com/"></iframe>
       </div>
     </div>
     <script src="http://code.jquery.com/jquery-latest.js"></script>
     <script type="text/javascript">
       $(document).ready(function() {
       
         //Start autoscroll code
-        setTimeout(function () {
-          $(".browser-content").animate({ scrollTop: "1400px" }, 70000, "linear");
-        }, 2000);
+        $('.css3-browser').addClass('moving');
         //End autoscroll code
         
         //Make the buttons work on older browsers (new security doesn't allow this in modern browsers sadly) 
