Transitions

The best place to learn to use transitions and animations is John Allsopp’s tutorial.

Lea Verou’s Animatable gave me ideas for additional tests.

Transitions allow you to alter styles not abruptly, but subtly and with intermediate steps.

The essence is that you define normal styles and special styles that should be applied after, for instance, a click, and that you then command the browser to use a transition for the style changes. This makes sure the property change is subtle and gradual.

Compatibility

All browsers support only the prefixed versions. This fact is ignored in the table below.

Selector or declaration IE 5.5 IE 6 IE 7 IE8 IE9 IE10 pr2 FF 11.0 Win FF 10.0.2 Mac Saf 5.1 Win Saf 5.1.2 Mac Chrome 18 Win Chrome 17 Mac Opera 11.61 Win Opera 11.61 Mac
transition-property
Which property does the transition take place on? 		No Yes Yes Yes Yes
 
transition-duration
How long does the transition take? 		No Yes Yes Yes Yes
 
transition-timing
What is the exact timing of the transition? 		No Yes Yes Yes Yes
 
transition-delay
What delay does the transition have? 		No Yes Yes Yes Yes
 
Selector or declaration IE 5.5 IE 6 IE 7 IE8 IE9 IE10 pr2 FF 11.0 Win FF 10.0.2 Mac Saf 5.1 Win Saf 5.1.2 Mac Chrome 18 Win Chrome 17 Mac Opera 11.61 Win Opera 11.61 Mac
width
 No Yes Yes Yes Yes
 
background-color
 No Yes Yes Yes Yes
 
background-position
 No Yes Yes Yes No
 
border-color
 No Yes Yes Yes Yes
 
border-width
 No Yes Yes Yes Yes
 
left
 No No Yes Yes Yes
 
color
 No Yes Yes Yes Yes
 
font-size
 No Yes Yes Yes Buggy
  • Opera doesn’t use transition on the first click, but tries to on the second (to restore the original font-size). It fails miserably, though.
line-height
 No Yes Yes Yes Incomplete
  • Opera doesn’t use transition on the very first click after the page loads. The effect works on every subsequent click.
Selector or declaration IE 5.5 IE 6 IE 7 IE8 IE9 IE10 pr2 FF 11.0 Win FF 10.0.2 Mac Saf 5.1 Win Saf 5.1.2 Mac Chrome 18 Win Chrome 17 Mac Opera 11.61 Win Opera 11.61 Mac
text-indent
 No Yes Yes Yes Yes
 
letter-spacing
 No No Yes Yes Yes
 
margin-top
 No Yes Yes Yes Yes
 
padding-top
 No Yes Yes Yes Yes
 
opacity
 No Yes Yes Yes Yes
 
text-shadow
 No Yes Incomplete Yes No
  • Safari doesn’t transition the blurring: it is applied at once at the end of the transition.

Vendor prefixes

Here are tests for the vendor prefixes. Click on the test elements. These are also tests for transition-property, transition-duration, and width.

No prefix

-webkit-

-moz-

-ms-

-o-

transition-timing

All together now.

linear

ease

ease-in-out

ease-in

ease-out

transition-delay

Delay of 1 second.

CSS properties

background-color

background-position

border-color
border-width
left
color
font-size
line-height
text-indent
letter-spacing
margin-top
padding-top
opacity
text-shadow

Multiple tests

margin and line-height
color and padding

Zoom

Finally, scroll up a bit so that you have a good view of several test boxes, and zoom your browser. There should be no transitions.

Safari/Chrome bug: all transitions are applied when you zoom. This should not happen, and does not in fact happen in Firefox and Opera.

Impossible properties

These properties are impossible to animate because there are no intermediate values. An element is either visible or invisible, a text is either bold or normal.

Sometimes the browser supports transitions nonetheless; you’ll find out by the slight delay in the applying of the new styles. This delay is really the time the transition would take.

font-weight
visibility