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
    Send Text Messages with PHP

    Kids these days, I tell ya.  All they care about is the technology.  The video games.  The bottled water.  Oh, and the texting, always the texting.  Back in my day, all we had was...OK, I had all of these things too.  But I still don't get...

  • By
    Create a CSS Cube

    CSS cubes really showcase what CSS has become over the years, evolving from simple color and dimension directives to a language capable of creating deep, creative visuals.  Add animation and you've got something really neat.  Unfortunately each CSS cube tutorial I've read is a bit...

Incredible Demos

  • By
    MooTools Zebra Tables Plugin

    Tabular data can oftentimes be boring, but it doesn't need to look that way! With a small MooTools class, I can make tabular data extremely easy to read by implementing "zebra" tables -- tables with alternating row background colors. The CSS The above CSS is extremely basic.

  • By
    New MooTools Plugin:  ElementFilter

    My new MooTools plugin, ElementFilter, provides a great way for you to allow users to search through the text of any mix of elements. Simply provide a text input box and ElementFilter does the rest of the work. The XHTML I've used a list for this example...

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!