If you haven't used transitions before, here's a brief introduction.
On the element you want to have animate, add the following CSS:
- #id_of_element {
- -webkit-transition: all 1s ease-in-out;
- -moz-transition: all 1s ease-in-out;
- -o-transition: all 1s ease-in-out;
- transition: all 1s ease-in-out;
- }
There is a lot of duplication due to vendor prefixes - until the specification if finalised, this will persist. If this bothers you, there are various tools such as CSS Scaffold, LESS, or my preference - SASS, that allow you to define mixins to avoid repetitive code.
Another approach is simply to write the CSS without the prefixes, then use Lea Verou's -prefix-free to add them in at runtime.
Something you definitely shouldn't do is to only include the webkit prefix. Tempting though it seems, particularly when developing for mobile devices, webkit isn't the only rendering engine!
It's worth noting as well that there isn't an -ms- prefix on these properties. IE10 was the first browser to ship without a prefix on these. The betas of IE10 did use the prefix however, so you may see code using -ms-. It's not needed though.
The syntax is pretty straightforward, you specify the property you want to animate, all or border-radius or color or whatever, the time to run, then the transition timing function. The options for the timing function are shown below.
Whenever any property changes, then it will animate instead of changing directly. This can be due to a different set of properties set on a pseudo class such as hover, or a new class or properties set by javascript. The example below uses :hover to change the properties – no javascript is needed.
To see the difference in speed, have a look at the speed test.
Different timing functions
In addition to the built in timing functions, you can also specify your own. The excellent Ceaser CSS Easing Tool makes this very easy.
It's worth noting that the curves you produce can have negative values in them. The bezier curve for the last box above iscubic-bezier(1.000, -0.530, 0.405, 1.425), the negative values are causing it to 'take a run up', which looks pretty awesome!
Delays
The syntax for a CSS3 transition is of the form:
transition: [ <transition-property> ||
<transition-duration> ||
<transition-timing-function> ||
<transition-delay> ]
You will notice the final parameter is a delay - this let's you trigger things after an event has occurred. Below is a small demo showing this functionality.
Transition delays
This works by just adding a delay to each of the different circles. This is as easy as adding a transition-delay: 0.6s; to the element.
Advanced delays
You can set the way different properties animate differently. In this example the normal (blue) circle has this CSS (with the appropriate vendor prefixes):
- #dd_main2 {
- transition: all 1s ease-in-out;
- }
The 'Example 1' (green) circle has this CSS instead:
- #dd_main2 {
- transition-property: top, left;
- transition-duration: 1s, 1s;
- transition-delay: 0s, 1s;
- }
While the 'Example 2' (red) circle has this CSS instead:
- #dd_main2 {
- transition-property: top, left, border-radius, background-color;
- transition-duration: 2s, 1s, 0.5s, 0.5s;
- transition-delay: 0s, 0.5s, 1s, 1.5s;
- }
This allows us to animate the properties independently of each other, meaning that this simple technique can be used to create very complex animations.
Animatable properties
Regarding the properties you can animate, the best way is to experiment. The W3C maintain a list of properties that can be animated on the CSS Transitions spec. These include everything from background-color and letter-spacing to text-shadow and min-height. Many of these properties are not supported by default by jQuery animation, making CSS transitions much more useful out of the box. In addition, many browsers hardware accelerate animations that don't require repaints, namely opacity, 3D transforms and filters. To see the methods that Webkit accelerates, take a look at the AnimationBase.cpp code from the Webkit source. At the time of writing there are three classes defined here: PropertyWrapperAcceleratedOpacity,PropertyWrapperAcceleratedTransform and PropertyWrapperAcceleratedFilter. These are the animations that Webkit accelerates. Other browsers do things differently, but as Webkit is popular on mobile where these things matter most, it's worth noting this special case.
In reality, browsers are allowing more properties than these to be animated - box-shadow springs to mind as an obvious example. The table below is taken from the link above, and can be considered the minimum number of properties you would expect to be animatable.
| Property Name | Type |
|---|
background-color | color |
background-image | only gradients |
background-position | percentage, length |
border-bottom-color | color |
border-bottom-width | length |
border-color | color |
border-left-color | color |
border-left-width | length |
border-right-color | color |
border-right-width | length |
border-spacing | length |
border-top-color | color |
border-top-width | length |
border-width | length |
bottom | length, percentage |
color | color |
crop | rectangle |
font-size | length, percentage |
font-weight | number |
grid-* | various |
height | length, percentage |
left | length, percentage |
letter-spacing | length |
line-height | number, length, percentage |
margin-bottom | length |
margin-left | length |
margin-right | length |
margin-top | length |
max-height | length, percentage |
max-width | length, percentage |
min-height | length, percentage |
min-width | length, percentage |
opacity | number |
outline-color | color |
outline-offset | integer |
outline-width | length |
padding-bottom | length |
padding-left | length |
padding-right | length |
padding-top | length |
right | length, percentage |
text-indent | length, percentage |
text-shadow | shadow |
top | length, percentage |
vertical-align | keywords, length, percentage |
visibility | visibility |
width | length, percentage |
word-spacing | length, percentage |
z-index | integer |
zoom | number |
<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>
