[skratchdot.]


I was going through some old files on my laptop, and found this snippet of code I created back in April. On April 9th, there was a google doodle for Eadweard J. Muybridge's 182nd Birthday.

I saw a post on HackerNews in which someone created a pure CSS version of the google doodle.

I created a JSFiddle snippet that day, but never posted it anywhere.

Anyways, I've cleaned the example up a bit, and posted it below. It now contains pure CSS3 controls to turn the demo on/off or change the speed of the animation.

Demo

Turn Animation

Off On

Speed:



 

CSS:

<style type="text/css">
    img#zoopraxiscope {
        width:230px;
        height:230px;
    }
    @-webkit-keyframes spin {
        from { -webkit-transform: rotate(0deg); }
        to { -webkit-transform: rotate(-360deg); }
    }
    @-moz-keyframes spin {
        from { -moz-transform: rotate(0deg); }
        to { -moz-transform: rotate(-360deg); }
    }
    @-ms-keyframes spin {
        from { -ms-transform: rotate(0deg); }
        to { -ms-transform: rotate(-360deg); }
    }
    a#animation-on:target~input[value=fast]:checked~img#zoopraxiscope {
        -webkit-animation: spin 230ms infinite linear;
        -moz-animation: spin 230ms infinite linear;
        -ms-animation: spin 230ms infinite linear;
    }
    a#animation-on:target~input[value=medium]:checked~img#zoopraxiscope {
        -webkit-animation: spin 920ms infinite linear;
        -moz-animation: spin 920ms infinite linear;
        -ms-animation: spin 920ms infinite linear;
    }
    a#animation-on:target~input[value=slow]:checked~img#zoopraxiscope {
        -webkit-animation: spin 2000ms infinite linear;
        -moz-animation: spin 2000ms infinite linear;
        -ms-animation: spin 2000ms infinite linear;
    }
</style>

HTML:

<form style="text-align:center">
  <h3>Turn Animation</h3>
  <a id="animation-off" href="#animation-off">Off</a>
  <a id="animation-on" href="#animation-on">On</a>
  <br />
  <h3>Speed:</h3>
  <label for="fast">Fast:</label>
  <input type="radio" name="speed" id="fast" value="fast" checked="checked" />
  <br />
  <label for="medium">Medium:</label>
  <input type="radio" name="speed" id="medium" value="medium" />
  <br />
  <label for="slow">Slow:</label>
  <input type="radio" name="speed" id="slow" value="slow" />
  <div style="height:50px">&nbsp;</div>
  <img id="zoopraxiscope" src="/images/posts/2012/05/28/zoopraxiscope.jpg" />
</form>

Inspired by the Google Doodle on April 9th, 2012 celebrating Eadweard J. Muybridge

See:

See also: