Create a Spinning Effect with CSS3

They're smooth, less taxing than JavaScript, and are the future of node animation within browsers. Dojo's mobile solution, dojox.mobile, uses CSS animations instead of JavaScript to lighten the application's JavaScript footprint. One of my favorite effects is the spinning, zooming CSS animation.

The CSS

The first task is creating the base animation with @-webkit-keyframes:

@-webkit-keyframes rotater {
0% { -webkit-transform:rotate(0) scale(1) }
50% { -webkit-transform:rotate(360deg) scale(2) }
100% { -webkit-transform:rotate(720deg) scale(1) }
}

The -webkit-transform property is the animator in this animation. Define that at 0% the element is at 0 rotation and scaled to 1 -- that is the original state of the element. At 50% of the animation, the element should be rotated 360 degress (a complete spin), and the element should grow twice in size. At 100%, the element should return to its original scale and rotate to 720 degrees, thus looking the same as it started.

With our named animation created, it's time to apply the animation to an element upon its hover state:

a.advert:hover { 
  -webkit-animation-name:rotater; 
  -webkit-animation-duration:500ms; 
  -webkit-animation-iteration-count:1; 
  -webkit-animation-timing-function:ease-out;
  
  -moz-transform:rotate(720eg) scale(2); 
  -moz-transition-duration:500ms; 
  -moz-transition-timing-function: ease-out;
}

The event is assigned using the -webkit-animation-name property. Additional properties are assigned:  -webkit-animation-duration makes the animation last 500 milliseconds, -webkit-animation-iteration-count directs the animation to occur only once, and -webkit-animation-timing-function sets the easing transition to ease-out.

Highly recommend using this effect with fixed-size DOM nodes, with background images.  Using this effect with simple DOM nodes doesn't look great.

source article: David Walsh

Share this article: