CSS: Animation Using CSS Transforms
The examples on this page will work best if you download the WebKit Nightly Build web browser. WebKit is the rendering engine used by Safari. The WebKit Nightly Build browser then is a preview of what's to come in Safari and other browsers and devices that use the same engine.
Two of the more interesting new features are CSS Transforms and CSS Animation which allow for some very cool effects.
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 green 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 it's 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 if you're using the WebKit Nightly Build 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 same four boxes from above, in their default states. When you hover over 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 it's starting position and state. And we can achieve all this using nothing other than 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 this 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. Stay tuned for more advanced examples using JavaScript to control the animation. 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.
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;
}
#submenu:hover {
background-color: #fc3;
-webkit-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;
}
div.rocket img {
-webkit-transition: all 2s ease-in-out;
}
#outerspace:hover div.rocket {
-webkit-transform: translate(540px,-200px);
}
#outerspace:hover div.rocket img {
-webkit-transform: rotate(70deg);
}
</style>
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. 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 accelerates 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 quite striking.
Related Articles
- Animation Using CSS Transforms
- Transition Timing Functions
References
Feedback and Questions
2008-05-26: Luca Belmonod says:
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 
2008-09-14: Ain says:
There's another CSS3 transforms test case available from flash tekkie.
Great feature indeed, let's all hope it gets finalised into CSS3 standard.
2009-05-18: pj says:
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)
