[skratchdot.]

May 28
2012

CSS3 Zoopraxiscope

css3  
 

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:

Tagged with: CSS3ZoopraxiscopeCSS TransformsCSS Animations


blog comments powered by Disqus