canvas { -moz-animation-duration: 1s; -moz-animation-timing-function: linear; -moz-animation-iteration-count: infinite; -moz-animation-name: rotate; -webkit-animation-duration: 1s; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: infinite; -webkit-animation-name: rotate; -ms-animation-duration: 1s; -ms-animation-timing-function: linear; -ms-animation-iteration-count: infinite; -ms-animation-name: rotate; -o-animation-duration: 1s; -o-animation-timing-function: linear; -o-animation-iteration-count: infinite; -o-animation-name: rotate; animation-duration: 1s; animation-timing-function: linear; animation-iteration-count: infinite; animation-name: rotate; } @-moz-keyframes rotate { from { -moz-transform:rotate( 0deg ); } to { -moz-transform:rotate( 360deg ); } } @-webkit-keyframes rotate { from { -webkit-transform:rotate( 0deg ); } to { -webkit-transform:rotate( 360deg ); } } @-o-keyframes rotate { from { -o-transform:rotate( 0deg ); } to { -o-transform:rotate( 360deg ); } } @-ms-keyframes rotate { from { -ms-transform:rotate( 0deg ); } to { -ms-transform:rotate( 360deg ); } } @-keyframes rotate { from { transform:rotate( 0deg ); } to { transform:rotate( 360deg ); } }
// prepare the animation canvas and the draw canvas var drawcanvas = document.createElement( 'canvas' ), drawctx = drawcanvas.getContext( '2d' ); // dimensions and container element var container = document.querySelector('section'), height = width = 300, halfwidth = width / 2, halfheight = height / 2, offset = i = x = 0, radius = height / 2 - 10; function init(){ drawcanvas.width = width; drawcanvas.height = height; container.appendChild( drawcanvas ); drawctx.save(); drawctx.translate( halfwidth, halfheight ); while( radius > 10 ) { drawctx.fillStyle = i % 2 === 0 ? '#000' : '#fff'; radius -= 6; x = Math.sin( i / 2 ) * 10; drawctx.beginPath(); drawctx.arc( x, 0, radius, 0, Math.PI * 2 ,true ); drawctx.closePath(); drawctx.fill(); i++; } drawctx.restore(); } init();
<section></section>