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
    fetch API

    One of the worst kept secrets about AJAX on the web is that the underlying API for it, XMLHttpRequest, wasn't really made for what we've been using it for.  We've done well to create elegant APIs around XHR but we know we can do better.  Our effort to...

  • By
    Regular Expressions for the Rest of Us

    Sooner or later you'll run across a regular expression. With their cryptic syntax, confusing documentation and massive learning curve, most developers settle for copying and pasting them from StackOverflow and hoping they work. But what if you could decode regular expressions and harness their power? In...

Incredible Demos

  • By
    GitHub-Style Sliding Links

    GitHub seems to change a lot but not really change at all, if that makes any sense; the updates come often but are always fairly small. I spotted one of the most recent updates on the pull request page. Links to long branch...

  • By
    Build a Slick and Simple MooTools Accordion

    Last week I covered a smooth, subtle MooTools effect called Kwicks. Another great MooTools creation is the Accordion, which acts like...wait for it...an accordion! Now I've never been a huge Weird Al fan so this is as close to playing an accordion as...

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!