Fixing period control.

assets/css/frames.css

@@ -1,192 +1,192 @@
 .frames > div:nth-child(1) {
-    transform: rotateY(0deg) translateZ(380px);
     -webkit-transform: rotateY(0deg) translateZ(380px);
     -moz-transform: rotateY(0deg) translateZ(380px);
     -ie-transform: rotateY(0deg) translateZ(380px);
     -o-transform: rotateY(0deg) translateZ(380px);
+    transform: rotateY(0deg) translateZ(380px);
     background-position: 0px 0;
 }
 .frames > div:nth-child(2) {
-    transform: rotateY(15deg) translateZ(380px);
     -webkit-transform: rotateY(15deg) translateZ(380px);
     -moz-transform: rotateY(15deg) translateZ(380px);
     -ie-transform: rotateY(15deg) translateZ(380px);
     -o-transform: rotateY(15deg) translateZ(380px);
+    transform: rotateY(15deg) translateZ(380px);
     background-position: 100px 0;
 }
 .frames > div:nth-child(3) {
-    transform: rotateY(30deg) translateZ(380px);
     -webkit-transform: rotateY(30deg) translateZ(380px);
     -moz-transform: rotateY(30deg) translateZ(380px);
     -ie-transform: rotateY(30deg) translateZ(380px);
     -o-transform: rotateY(30deg) translateZ(380px);
+    transform: rotateY(30deg) translateZ(380px);
     background-position: 200px 0;
 }
 .frames > div:nth-child(4) {
-    transform: rotateY(45deg) translateZ(380px);
     -webkit-transform: rotateY(45deg) translateZ(380px);
     -moz-transform: rotateY(45deg) translateZ(380px);
     -ie-transform: rotateY(45deg) translateZ(380px);
     -o-transform: rotateY(45deg) translateZ(380px);
+    transform: rotateY(45deg) translateZ(380px);
     background-position: 300px 0;
 }
 .frames > div:nth-child(5) {
-    transform: rotateY(60deg) translateZ(380px);
     -webkit-transform: rotateY(60deg) translateZ(380px);
     -moz-transform: rotateY(60deg) translateZ(380px);
     -ie-transform: rotateY(60deg) translateZ(380px);
     -o-transform: rotateY(60deg) translateZ(380px);
+    transform: rotateY(60deg) translateZ(380px);
     background-position: 400px 0;
 }
 .frames > div:nth-child(6) {
-    transform: rotateY(75deg) translateZ(380px);
     -webkit-transform: rotateY(75deg) translateZ(380px);
     -moz-transform: rotateY(75deg) translateZ(380px);
     -ie-transform: rotateY(75deg) translateZ(380px);
     -o-transform: rotateY(75deg) translateZ(380px);
+    transform: rotateY(75deg) translateZ(380px);
     background-position: 500px 0;
 }
 .frames > div:nth-child(7) {
-    transform: rotateY(90deg) translateZ(380px);
     -webkit-transform: rotateY(90deg) translateZ(380px);
     -moz-transform: rotateY(90deg) translateZ(380px);
     -ie-transform: rotateY(90deg) translateZ(380px);
     -o-transform: rotateY(90deg) translateZ(380px);
+    transform: rotateY(90deg) translateZ(380px);
     background-position: 600px 0;
 }
 .frames > div:nth-child(8) {
-    transform: rotateY(105deg) translateZ(380px);
     -webkit-transform: rotateY(105deg) translateZ(380px);
     -moz-transform: rotateY(105deg) translateZ(380px);
     -ie-transform: rotateY(105deg) translateZ(380px);
     -o-transform: rotateY(105deg) translateZ(380px);
+    transform: rotateY(105deg) translateZ(380px);
     background-position: 700px 0;
 }
 .frames > div:nth-child(9) {
-    transform: rotateY(120deg) translateZ(380px);
     -webkit-transform: rotateY(120deg) translateZ(380px);
     -moz-transform: rotateY(120deg) translateZ(380px);
     -ie-transform: rotateY(120deg) translateZ(380px);
     -o-transform: rotateY(120deg) translateZ(380px);
+    transform: rotateY(120deg) translateZ(380px);
     background-position: 800px 0;
 }
 .frames > div:nth-child(10) {
-    transform: rotateY(135deg) translateZ(380px);
     -webkit-transform: rotateY(135deg) translateZ(380px);
     -moz-transform: rotateY(135deg) translateZ(380px);
     -ie-transform: rotateY(135deg) translateZ(380px);
     -o-transform: rotateY(135deg) translateZ(380px);
+    transform: rotateY(135deg) translateZ(380px);
     background-position: 900px 0;
 }
 .frames > div:nth-child(11) {
-    transform: rotateY(150deg) translateZ(380px);
     -webkit-transform: rotateY(150deg) translateZ(380px);
     -moz-transform: rotateY(150deg) translateZ(380px);
     -ie-transform: rotateY(150deg) translateZ(380px);
     -o-transform: rotateY(150deg) translateZ(380px);
+    transform: rotateY(150deg) translateZ(380px);
     background-position: 1000px 0;
 }
 .frames > div:nth-child(12) {
-    transform: rotateY(165deg) translateZ(380px);
     -webkit-transform: rotateY(165deg) translateZ(380px);
     -moz-transform: rotateY(165deg) translateZ(380px);
     -ie-transform: rotateY(165deg) translateZ(380px);
     -o-transform: rotateY(165deg) translateZ(380px);
+    transform: rotateY(165deg) translateZ(380px);
     background-position: 1100px 0;
 }
 .frames > div:nth-child(13) {
-    transform: rotateY(180deg) translateZ(380px);
     -webkit-transform: rotateY(180deg) translateZ(380px);
     -moz-transform: rotateY(180deg) translateZ(380px);
     -ie-transform: rotateY(180deg) translateZ(380px);
     -o-transform: rotateY(180deg) translateZ(380px);
+    transform: rotateY(180deg) translateZ(380px);
     background-position: 1200px 0;
 }
 .frames > div:nth-child(14) {
-    transform: rotateY(195deg) translateZ(380px);
     -webkit-transform: rotateY(195deg) translateZ(380px);
     -moz-transform: rotateY(195deg) translateZ(380px);
     -ie-transform: rotateY(195deg) translateZ(380px);
     -o-transform: rotateY(195deg) translateZ(380px);
+    transform: rotateY(195deg) translateZ(380px);
     background-position: 1300px 0;
 }
 .frames > div:nth-child(15) {
-    transform: rotateY(210deg) translateZ(380px);
     -webkit-transform: rotateY(210deg) translateZ(380px);
     -moz-transform: rotateY(210deg) translateZ(380px);
     -ie-transform: rotateY(210deg) translateZ(380px);
     -o-transform: rotateY(210deg) translateZ(380px);
+    transform: rotateY(210deg) translateZ(380px);
     background-position: 1400px 0;
 }
 .frames > div:nth-child(16) {
-    transform: rotateY(225deg) translateZ(380px);
     -webkit-transform: rotateY(225deg) translateZ(380px);
     -moz-transform: rotateY(225deg) translateZ(380px);
     -ie-transform: rotateY(225deg) translateZ(380px);
     -o-transform: rotateY(225deg) translateZ(380px);
+    transform: rotateY(225deg) translateZ(380px);
     background-position: 1500px 0;
 }
 .frames > div:nth-child(17) {
-    transform: rotateY(240deg) translateZ(380px);
     -webkit-transform: rotateY(240deg) translateZ(380px);
     -moz-transform: rotateY(240deg) translateZ(380px);
     -ie-transform: rotateY(240deg) translateZ(380px);
     -o-transform: rotateY(240deg) translateZ(380px);
+    transform: rotateY(240deg) translateZ(380px);
     background-position: 1600px 0;
 }
 .frames > div:nth-child(18) {
-    transform: rotateY(255deg) translateZ(380px);
     -webkit-transform: rotateY(255deg) translateZ(380px);
     -moz-transform: rotateY(255deg) translateZ(380px);
     -ie-transform: rotateY(255deg) translateZ(380px);
     -o-transform: rotateY(255deg) translateZ(380px);
+    transform: rotateY(255deg) translateZ(380px);
     background-position: 1700px 0;
 }
 .frames > div:nth-child(19) {
-    transform: rotateY(270deg) translateZ(380px);
     -webkit-transform: rotateY(270deg) translateZ(380px);
     -moz-transform: rotateY(270deg) translateZ(380px);
     -ie-transform: rotateY(270deg) translateZ(380px);
     -o-transform: rotateY(270deg) translateZ(380px);
+    transform: rotateY(270deg) translateZ(380px);
     background-position: 1800px 0;
 }
 .frames > div:nth-child(20) {
-    transform: rotateY(285deg) translateZ(380px);
     -webkit-transform: rotateY(285deg) translateZ(380px);
     -moz-transform: rotateY(285deg) translateZ(380px);
     -ie-transform: rotateY(285deg) translateZ(380px);
     -o-transform: rotateY(285deg) translateZ(380px);
+    transform: rotateY(285deg) translateZ(380px);
     background-position: 1900px 0;
 }
 .frames > div:nth-child(21) {
-    transform: rotateY(300deg) translateZ(380px);
     -webkit-transform: rotateY(300deg) translateZ(380px);
     -moz-transform: rotateY(300deg) translateZ(380px);
     -ie-transform: rotateY(300deg) translateZ(380px);
     -o-transform: rotateY(300deg) translateZ(380px);
+    transform: rotateY(300deg) translateZ(380px);
     background-position: 2000px 0;
 }
 .frames > div:nth-child(22) {
-    transform: rotateY(315deg) translateZ(380px);
     -webkit-transform: rotateY(315deg) translateZ(380px);
     -moz-transform: rotateY(315deg) translateZ(380px);
     -ie-transform: rotateY(315deg) translateZ(380px);
     -o-transform: rotateY(315deg) translateZ(380px);
+    transform: rotateY(315deg) translateZ(380px);
     background-position: 2100px 0;
 }
 .frames > div:nth-child(23) {
-    transform: rotateY(330deg) translateZ(380px);
     -webkit-transform: rotateY(330deg) translateZ(380px);
     -moz-transform: rotateY(330deg) translateZ(380px);
     -ie-transform: rotateY(330deg) translateZ(380px);
     -o-transform: rotateY(330deg) translateZ(380px);
+    transform: rotateY(330deg) translateZ(380px);
     background-position: 2200px 0;
 }
 .frames > div:nth-child(24) {
-    transform: rotateY(345deg) translateZ(380px);
     -webkit-transform: rotateY(345deg) translateZ(380px);
     -moz-transform: rotateY(345deg) translateZ(380px);
     -ie-transform: rotateY(345deg) translateZ(380px);
     -o-transform: rotateY(345deg) translateZ(380px);
+    transform: rotateY(345deg) translateZ(380px);
     background-position: 2300px 0;
 }

assets/css/main.css

@@ -45,11 +45,11 @@ body {
     color: white;
 
     /* Position in front of the zoetrope */
-    transform: translateZ(1500px);
     -webkit-transform: translateZ(1500px);
     -moz-transform: translateZ(1500px);
     -ie-transform: translateZ(1500px);
     -o-transform: translateZ(1500px);
+    transform: translateZ(1500px);
     z-index: 1000;
 }
 

assets/css/zoetrope.css

@@ -12,39 +12,45 @@
 }
 
 .wrapper * {
-    transform-style: preserve-3d;
     -webkit-transform-style: preserve-3d;
     -moz-transform-style: preserve-3d;
     -ie-transform-style: preserve-3d;
     -o-transform-style: preserve-3d;
+    transform-style: preserve-3d;
 }
 
 .zoetrope {
     height: 100px;
     width: 100px;
     margin: 0 auto;
-    perspective: 900;
+
     -webkit-perspective: 900;
     -moz-perspective: 900;
     -ie-perspective: 900;
     -o-perspective: 900;
-    transform: rotateX(-11deg);
+    perspective: 900;
+
     -webkit-transform: rotateX(-11deg);
     -moz-transform: rotateX(-11deg);
     -ie-transform: rotateX(-11deg);
     -o-transform: rotateX(-11deg);
+    transform: rotateX(-11deg);
 }
 
 .frames {
     position: relative;
     height: 100px;
     width: 100px;
     margin: 0 auto;
-    animation: spin 1200ms infinite linear;
-    -webkit-animation: spin 1200ms infinite linear;
+    -webkit-animation-name: spin;
+    -webkit-animation-duration: 1200ms;
+    -webkit-animation-iteration-count: infinite;
+    -webkit-animation-timing-function: linear;
+
     -moz-animation: spin 1200ms infinite linear;
     -ie-animation: spin 1200ms infinite linear;
     -o-animation: spin 1200ms infinite linear;
+    animation: spin 1200ms infinite linear;
 }
 
 @keyframes spin {
@@ -80,11 +86,11 @@
 
 .frames > div {
     background-color: white;
-    backface-visibility: visible;
     -webkit-backface-visibility: visible;
     -moz-backface-visibility: visible;
     -ie-backface-visibility: visible;
     -o-backface-visibility: visible;
+    backface-visibility: visible;
 }
 
 .zoetrope.ball .frames > div  {
@@ -104,11 +110,11 @@
     background: black;
     width: 102px;
     /* HACK getting the :after positioned outside the wheel... */
-    transform: translateZ(1px);
     -webkit-transform: translateZ(1px);
     -moz-transform: translateZ(1px);
     -ie-transform: translateZ(1px);
     -o-transform: translateZ(1px);
+    transform: translateZ(1px);
 }
 
 .frames > div:after {
@@ -120,14 +126,16 @@
     border-right: 35px solid black;
     border-top: 15px solid black;
     border-bottom: 15px solid black;
-    box-sizing: border-box;
+
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     -ie-box-sizing: border-box;
     -o-box-sizing: border-box;
-    transform: translateZ(1px);
+    box-sizing: border-box;
+
     -webkit-transform: translateZ(1px);
     -moz-transform: translateZ(1px);
     -ie-transform: translateZ(1px);
     -o-transform: translateZ(1px);
+    transform: translateZ(1px);
 }

generator.rb

@@ -8,11 +8,11 @@
 (0...frames).each do |i|
     output.puts <<-css
 .frames > div:nth-child(#{ i + 1 }) {
-    transform: rotateY(#{ angleStep * i }deg) translateZ(380px);
     -webkit-transform: rotateY(#{ angleStep * i }deg) translateZ(380px);
     -moz-transform: rotateY(#{ angleStep * i }deg) translateZ(380px);
     -ie-transform: rotateY(#{ angleStep * i }deg) translateZ(380px);
     -o-transform: rotateY(#{ angleStep * i }deg) translateZ(380px);
+    transform: rotateY(#{ angleStep * i }deg) translateZ(380px);
     background-position: #{ 100 * i }px 0;
 }
     css

index.html

@@ -28,13 +28,11 @@ <h2>What is a Zoetrope?</h2>
             <h2>Options:</h2>
 
             <div id="options"></div>
-
-            <p class="error">* Period control appears to be broken in Safari and Webkit nightlies, <b>but works great in Chrome</b>.</p>
         </div>
 
         <p class="social">
             <iframe src="http://www.facebook.com/plugins/like.php?href=http://andrew-hoyer.com/experiments/zoetrope/&amp;layout=button_count&amp;show_faces=false&amp;width=90&amp;action=like&amp;colorscheme=light&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:90px; height:21px;" allowTransparency="true"></iframe>
-        
+
             <a href="http://twitter.com/share" class="twitter-share-button" data-url="http://andrew-hoyer.com/experiments/zoetrope/" data-text="Old fashion CSS animation by @ndrwhr" data-count="horizontal">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
         </p>
 

src/controls.js

@@ -29,7 +29,15 @@ var Zoetrope = function(){
         get: function(){ return period },
         set: function(value){
             period = value;
-            DOM.style(frames, 'animationDuration', (period * 1000) + 'ms');
+
+            // HACK: Chrome doesn't seem to want to update the animation duration. To get around
+            // this we should turn off the animation for a moment, then turn it back on with
+            // duration we would like.
+            DOM.style(frames, 'animation', 'none');
+            setTimeout(function(){
+                DOM.style(frames, 'animation', '');
+                DOM.style(frames, 'animationDuration', (period * 1000) + 'ms');
+            }, 1);
         }
     });
 
@@ -76,7 +84,7 @@ window.onload = function(){
         'Bouncing Ball': 'ball',
         'Steamboat Willie': 'willie'
     }).name('Animation');
-    gui.add(zt, 'period', 0.01, 5, 0.01).name('Rotational Period*');
+    gui.add(zt, 'period', 0.01, 5, 0.01).name('Rotational Period');
     gui.add(zt, 'scale', 0.5, 5, 0.01).name('Scale');
     gui.add(zt, 'angle', -20, 20, 0.1).name('Angle');
     gui.add(zt, 'background', 0, 255, 1).name('Background');