CSS: Animation Using CSS Transforms
The examples on this page will work properly in Safari, Chrome and Opera. In the Firefox prior to version 4 you will see the transforms, but without any animation. Some effects may also work now in Internet Explorer 9 if you use the -ms- vendor prefix.
The implementation of animation in CSS involves setting up a transformation to take place in response to a mouseover or other event. Then, rather than applying the effect instantly, we assign a transition timing function which applies the transformation/s over a set time period.
Firefox and Opera now support these transforms with an almost identical syntax - just replace -webkit with -moz or -o in the examples below and you will see the same effects. And you can use -ms- to enable the effects for IE9.
Introducing CSS Transformations
The effect of a CSS Transform is to modify the appearance of an element in the browser by translating, rotating or other means. When defined in a style sheet the transform is applied before the page is rendered, so you don't actually see any animations. Transforms can also be applied as a mouseover or similar effect which you can see in the next section.
Apple's proposal for CSS Transformations calls for the ability to change the perspective and work in three dimensions, but that's some way away yet. Even the features demonstrated here won't appear in other browsers until they're approved by the standards body who are still quibbling over CSS3 modules.
Below we've placed four identical DIV's styled as a 100 x 60 pixel box with a 2 pixel border. Subsequently, each element has been transformed in some way using the -webkit-transform property as follows:
| box 1 | Translated to the right: -webkit-transform: translate(3em,0); |
| box 2 | Rotated 30 degrees with the clock: -webkit-transform: rotate(30deg); |
| box 3 | Translated to the left and down slightly: -webkit-transform: translate(-3em,1em); |
| box 4 | Scaled to twice its original size: -webkit-transform: scale(2); |
Without the translations, and the red border on the second box, you would see just four identical boxes labelled one through four. What you see in supported browsers (Safari, Chrome, Firefox, Opera), however, will be more like this:
Of note is the fact that the text is still selectable in transformed elements, even when rotated, and that scaling an element affects other properties including border widths and font sizes and not just the dimensions.
Animating your Transforms
While CSS Transformation in itself is a powerful tool for developers (though I shudder to think what would happen if it was more widely available), the ability to animate the same effects using -webkit-transition is far more exciting. Move your mouse over the following four boxes for a demonstration:
What you see above is the four boxes from the previous section, in their default states. When you mouseover any of the boxes, however, the CSS transformation is applied as a one second animation. When the mouse moves away the animation is reversed, taking each box back to its starting position and state. And we achieve this without using JavaScript - only HTML and CSS!
If you think that's cool, realise that CSS Animation can be applied not just to the transforms, but also to other CSS properties including: opacity, colour and a bunch of other properties.
In the next example the box on the left begins as small and green with square corners, while the one on the right is larger, with a red border and rounded corners. Hovering over either of the boxes will trigger an animation that makes box 1 take on the appearance of box 2 and vice versa.
Again, we're still only using HTML and CSS to make this happen. Without CSS Transforms the two boxes will still change their border-color, and possibly also the border-radius, but it happens immediately rather than as a one second animation.
For more advanced examples you can read our new article on using JavaScript to trigger the animation.
Multiple Transforms on one element
To apply more than one transformation to a single element simply list them one after another separated by spaces. The submenu for example at the top right of this page has the following styles:
<style type="text/css">
#submenu {
background-color: #eee;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
}
#submenu:hover {
background-color: #fc3;
-webkit-transform: rotate(360deg) scale(2);
-moz-transform: rotate(360deg) scale(2);
-o-transform: rotate(360deg) scale(2);
-ms-transform: rotate(360deg) scale(2);
}
</style>
This means that when you hover over the submenu, it will change colour, rotate and double in size over a period of one second as shown here:
 |
<=> |  |
These effects are now available in the latest public release of Safari, so in principle all OSX users will be able to see these effects. Whether it's a good idea to add them to your website I'll leave up to you.
Update: Thanks to misterbisson those without WebKit can now see a screencast of the menu animation:
Animations in action
Now here's another example of the kind of fun we can have in combining different effects into single animation. Perhaps you can already work out what's going to happen based on the CSS?
<style type="text/css">
#outerspace {
position: relative;
height: 400px;
background: #0c0440 url(/images/outerspace.jpg);
}
div.rocket {
position: absolute;
bottom: 10px;
left: 20px;
-webkit-transition: all 3s ease-in;
-moz-transition: all 3s ease-in;
-o-transition: all 3s ease-in;
-ms-transition: all 3s ease-in;
}
div.rocket img {
-webkit-transition: all 2s ease-in-out;
-moz-transition: all 2s ease-in-out;
-o-transition: all 2s ease-in-out;
-ms-transition: all 2s ease-in-out;
}
#outerspace:hover div.rocket {
-webkit-transform: translate(540px,-200px);
-moz-transform: translate(540px,-200px);
-o-transform: translate(540px,-200px);
-ms-transform: translate(540px,-200px);
}
#outerspace:hover div.rocket img {
-webkit-transform: rotate(70deg);
-moz-transform: rotate(70deg);
-o-transform: rotate(70deg);
-ms-transform: rotate(70deg);
}
</style>
.rocket
If you're using Safari 3 you may notice some problems with the animation, particularly when it reverses after you move the mouse away, but in the latest version of WebKit it's already much smoother. Also the animation in Opera is a bit erratic, with not all the elements being animated.
The dotted outline that appears during the animation shows the placement of the DIV containing the rocket image. This DIV translates across the screen while the image inside is rotated. Simple!
For the browser-impaired what's happening is that when you move the mouse over the space background, the rocket translates from the bottom left to the top right over a period of 3 seconds (translate()) and also rotates 70 degrees in a clockwise direction over the first 2 seconds (rotate()). The effect is rudimentary, but shows the potentional.
To have more control over the animation paths and timing, you can set up WebKit Keyframes. They also allow the animations to run automatically rather than in response to mouse events.
Multiple timing functions
In this example we are applying four different transitions using four different timing functions.
When you :hover over the area to the right the blue box will spin, change color from red to blue and move from the top left of the containing box to the bottom right over two seconds.
The first thing you will notice is that that the movement of the box appears to be curved rather than straight. That's because we've used the ease-out timing function for the horizontal translation and ease-in for the vertical.
The other feature is that the colour change from blue to red takes place over the first second of the two section transition, followed by the rotation which takes place over the second second.
The trick to this is that instead of defining the -webkit-transition as a single property, you can break it up into component parts. We've also made use of -webkit-transition-delay which allows you to set the starting point of different effects.
Here are the relevant CSS statements:
#block {
...
background: blue;
...
-webkit-transition-property: left, top, background, -webkit-transform;
-webkit-transition-duration: 2s, 2s, 1s, 1s;
-webkit-transition-timing-function: ease-out, ease-in, linear, ease-in-out;
-webkit-transition-delay: 0, 0, 0, 1s;
...
}
#stage:hover #block {
left: 100px;
top: 100px;
background: red;
-webkit-transform: rotate(360deg);
}
The rules affecting the background colour transition have been highlighted.
Firefox (as of v9) does not appear to support the transition-delay option. All of the transition effects are applied, but starting at the same time.
Hover over one element to affect another
A couple of people have asked about triggering animations in relation to a click or hover event elsewhere on the page. With JavaScript this can be done by using an event handler to set or change the className of the element to be animated, and to have a transformation or keyframes associated with the new class.
Using pure CSS there are some options for targeting related elements. These involve selectors such as the > (child), + (adjacent sibling) and ~ (general sibling) combinators. All the above examples involve a direct hover event either on the element itself or on its container.
In this example the blue box is animated only when you hover over its sibing, the red box:
The relevant CSS code is as follows. Note that we are using the + adjacent sibling combinator to target #box2 when #box1 experiences a hover event. The ~ combinator may be more flexible in letting you target elements that are further away from the triggering element.
#box2 {
position: absolute;
left: 120px;
...
background: blue;
...
}
#box1:hover + #box2 {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
left: 627px;
background: yellow;
}
This example works more or less as intended in WebKit (Safari, Chrome), Firefox and Opera. It may also work in IE10 or higher - if you can confirm that please let us know.
Related Articles
- Animation Using CSS Transforms
- Transition Timing Functions
- 3D Transforms and Animations
- Bouncing Ball Animation
- JavaScript: Controlling CSS Animations
- JavaScript: CSS Animated Fireworks
References
Translations
- Belorussian - by softdroid
User Comments and Notes
Luca Belmonod 26 May, 2008
hem, i can only see the menu changing color,
do i have to disable some ad protection, or script protection?
any way i don't want script for transition and animation
thanks
hem, you're using Firefox and not Safari
Ain 14 September, 2008
There's another CSS3 transforms test case available from flash tekkie.
Great feature indeed, let's all hope it gets finalised into CSS3 standard.
pj 18 May, 2009
actually . . . all your web-kit transformations work in both google chrome2-beta as well as apple safari4-beta.
funny part about it is this . . . apple wants 3-d animation with web-kit . . . and their 2-d transformations are not as smooth as chrome's transformations.
(www.nabble.com/Apple%27s-Proposal-for-CSS-Transformations-t4760870.html)
Erik K Veland 12 August, 2009
Is there a way for the animation to be triggered on pageload instead of on a hover? Preferably without javascript.
I still have to investigate this, but I'm fairly certain that you'll need to use JavaScript to add an onload event. Otherwise when the page has loaded the transforms will have already completed.
eike 4 October, 2009
How to trigger an animation onload?
I want to animate opacity from 0 to 1 upon load. I got this working with minimal support from javascript, but I'm looking for a solution that is purely css based.
I want to get rid of the javascript for this effect. Any hints someone out there?
shoaib hussain 20 December, 2009
applied this to my blog just yesterday and folks are already asking me how m i doing it? lol i routed them this way .thnx
A. H. M. 7 May, 2010
This also works with Google Chrome perfectly (or at least the 5.0 beta).
Naresh kumar 20 May, 2010
Hello sir i am using Firefox explorer. This animation is not working for me. When I will take the mouse over to it. Its changing the color only but I want to increase the size also. Please help me.
Both the colour and size will change in mouseover in Firefox 3.6, but instantly rather than through a transition. In version 3.7 transition timing functions will also be supported.
Alaor 29 May, 2010
Why did you left opera out? Your examples looks good in Opera, using the -o- prefix.
In the very latest version of Opera for OSX (10.53) the transforms will work, but only some of the animation. The animation is also still a bit jerky.
Arthur Abogadil 16 September, 2010
Found this link from an Smashing Magazine article about inspirational sources of Typhographical layout, nice post.
Nicolás Almería 12 January, 2011
Excelent post but this controls it doesn't work in IE..
IE9 will support some CSS3 2D Transforms, but probably not the animation effects.
David 18 January, 2011
Thanks for your css treaks. Now I have my own css animated header!!! Take a look at www.polimalo.com/
Awesome!
css transform 8 March, 2011
I've built a jQuery plugin that makes it easy to use css transform in a cross-browser way: github.com/lrbabe/jquery.transform.js
shibbydib 13 March, 2011
Let me tell, you this is all crap. None of these work the same across any browser, not even Chrome/Firefox, latest versions of both support CSS transforms remotely the same. This is what is supposed to replace Flash? Give me a break.
Gene Borman 9 August, 2011
I suppose we will just have to wait until IE catches up with the rest of the world. Any odds given as to when?
The rumour is that -ms-transition is coming in IE10
Fokkelien 23 September, 2011
The animations work very well, even in IE 9 & 10. Firefox is OK, but in Chrome and Safari they are really beautiful.
Good to know. Dank je wel
Freelance Front End Developer 4 October, 2011
Knowing when the transition has ended (using the transitionend event) is really useful - you could potentially use it to chain effects across multiple elements.
Dave 17 November, 2011
Can't wait for -ms-transition to become available, why does IE always have to be two steps behind other browsers!! I still can't get over why browsers all come up with their own prefixed versions of transform, transition etc etc. It makes it a nightmare to remember! I end up having to use sites like www.cssrotate.com to get the job done lol!