Create a Spinning, Zooming Effect with CSS3
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!
Neat-o! It doesn’t work in FF 3.6 though. Does work in Chrome though!
I should mention that this is targeted toward WebKit and FF4+.
hi, the animation that is crazy is the one with your avatar, how can i do it?
Here you go! http://davidwalsh.name/css-explode
Awesome! This would be nice to combine with a zoom-out on deleting an image from a gallery.
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?
I can’t even see the images in FF4, like the first guy said it works in Chrome though.
Thank you David!!
doesn’t zoom in FF4 – does spin though, just no zoom.
Awesome, Thanks for the post :D
Nice post i’ll definitely have to give this a try when i get a chance and try my own css based animations!
Doesn’t spin nor zoom in Chrome 11.0.672.2
Works for me:
Safari 5.0.4
Firefox 4
Chrome 10.0.648.204
WebKit Nightlies
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.
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.
Spins but not zooms in FF4 for Linux.
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 ;)
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
Opera supports transitions and transforms.
Info: http://www.opera.com/docs/specs/presto28/css/transitions/
http://dev.opera.com/articles/view/css3-transitions-and-2d-transforms/
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.
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!
Thank you! Updated!
Pretty neat. Love seeing all this new stuff using CSS3.
David, how can i have like a slide show in my header?
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 :)
Absolutely cool and brilliant.. Thanks :)
Demo page works for me!
Nice work!
How did you do the Facebook, Google, etc buttons?