Create a Spinning, Zooming Effect with CSS3

By  on  

In case you weren't aware, CSS animations are awesome.  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.  Let me show you how it's done!

The CSS

The first task is creating the base animation with @-{vendor}-keyframes:

@keyframes rotater {
0% { transform:rotate(0) scale(1) }
50% { transform:rotate(360deg) scale(2) }
100% { 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 degrees (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 { 
	/* safari / chrome / mozilla */
	animation-name:rotater; 
	animation-duration:500ms; 
	animation-iteration-count:1; 
	animation-timing-function: ease-out;

	/* opera */
	-o-transform:rotate(360deg) scale(2);
	-o-transition-duration:500ms;
	-o-transition-timing-function: ease-out;

	/* ie */
	-ms-transform:rotate(360deg) scale(2);
	-ms-transform-duration:500ms;
	-ms-transform-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.

I highly recommend using using this effect with fixed-size DOM nodes, with background images.  Using this effect with simple DOM nodes doesn't look great.  Let me know what you think about this animation, and what you think it could use to look even better!

Recent Features

  • By
    Conquering Impostor Syndrome

    Two years ago I documented my struggles with Imposter Syndrome and the response was immense.  I received messages of support and commiseration from new web developers, veteran engineers, and even persons of all experience levels in other professions.  I've even caught myself reading the post...

  • By
    Introducing MooTools Templated

    One major problem with creating UI components with the MooTools JavaScript framework is that there isn't a great way of allowing customization of template and ease of node creation. As of today, there are two ways of creating: new Element Madness The first way to create UI-driven...

Incredible Demos

  • By
    Google-Style Element Fading Using MooTools or jQuery

    Google recently introduced an interesting effect to their homepage: the top left and top right navigation items don't display until you move your mouse or leave the search term box. Why? I can only speculate that they want their homepage as...

  • By
    Chris Coyier’s Favorite CodePen Demos

    David asked me if I'd be up for a guest post picking out some of my favorite Pens from CodePen. A daunting task! There are so many! I managed to pick a few though that have blown me away over the past few months. If you...

Discussion

  1. CBloss

    Neat-o! It doesn’t work in FF 3.6 though. Does work in Chrome though!

  2. I should mention that this is targeted toward WebKit and FF4+.

  3. hi, the animation that is crazy is the one with your avatar, how can i do it?

  4. Awesome! This would be nice to combine with a zoom-out on deleting an image from a gallery.

  5. This will be excellent when paired with Modernizr so that it will fall back to JavaScript animation.

    Quick question, as I’m currently stuck at work with FF3.6 and IE6 (GAH!): How does the FF4 animation differ from the Webkit version? I notice it doesn’t have has much fine-grained control. Does the icon stay scaled up when the animation completes?

  6. I can’t even see the images in FF4, like the first guy said it works in Chrome though.

  7. Thank you David!!

  8. dj

    doesn’t zoom in FF4 – does spin though, just no zoom.

  9. SalmanAbbas007

    Awesome, Thanks for the post :D

  10. Nice post i’ll definitely have to give this a try when i get a chance and try my own css based animations!

  11. Beau

    Doesn’t spin nor zoom in Chrome 11.0.672.2

  12. Works for me:

    Safari 5.0.4
    Firefox 4
    Chrome 10.0.648.204
    WebKit Nightlies

  13. This works in my FF4.

    Random: David, I’d recommend varying the header transform/rotate on your blog. They all look like they are at the same angle, instead of in an organic grunge aesthetic.

  14. Andy

    Even in Chrome for me the animations aren’t actually that smooth, they are choppy. This is one of my grievances with CSS3 animations. In Flash doing a simple effect like that is both easy and guaranteed to be smooth. I have not seen any CSS3 animations that made me think “wow, that looks smooth.” Flash has been developed for years to render hardware accelerated graphics, and for web animations it’s top notch. It isn’t in a browser. All of this CSS3 stuff is forcing browsers into the graphics realms which is not what a browser traditionally is. A browser is not a game platform (yet). Flash is a game platform. A browser is not designed to deliver blazing fast graphics. All of these CSS3 animations are assuming that the browser developers are ok transitioning into the world of image manipulation.

  15. Morton

    Spins but not zooms in FF4 for Linux.

  16. JR

    Hi, in latest chrome beta works as intended (at least for me)

    Anyway, If you modify the duration to 1500ms instead of 500 and the timing-function to linear instead of ease-out, you get a more uniform effect instead having a slight hiccup in the middle caused by the ease.

    Testing this in chrome it’s soooo easy with the direct manipulation tools… ^^

    Anyway, great effect amd site.
    Thanks for all these knowledge pearls you give us ;)

  17. Hi David,

    Nice post!
    You can make it to work in IE as well. All versions.

    Open :

    http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/filters/matrix.htm in IE and use matrix transformation.

    I`ve recently used it to rotate a picture for a website but it can also be used to animate and rotate.

    Full documentaion:
    http://msdn.microsoft.com/en-us/library/ms533014%28VS.85%29.aspx

    Cheers,
    Alex

  18. Matthew F.

    The way people are using CSS3 animations has convinced me that some day, we’ll look back on them the way we now view the BLINK tag.

  19. This is an awesome post! It’s very smooth. I will be using it for one of the effects on my site. But just notice a small typo, you have “-p-transition-timing-function” there instead of “-o-transition-timing-function” Anyways, thanks a lot for this post!

  20. Pretty neat. Love seeing all this new stuff using CSS3.

  21. BitEric

    David, how can i have like a slide show in my header?

  22. Hi David Walsh, Awesome article, I tried to rotate in Firefox( -moz-transform), Opera and IE, but I can’t. This post helped me. Thanks you :)

  23. Absolutely cool and brilliant.. Thanks :)

  24. Demo page works for me!

  25. frfreshman

    Nice work!
    How did you do the Facebook, Google, etc buttons?

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!