Transitions

Back to the index.

CSS3 transitions specification.

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.

This is the desktop table. See also the mobile table.

Last major update on 3 November 2014.

Method or property Internet Explorer Firefox Safari Chrome Opera Yandex
7 and lower 8 9 10 11 33 Win 33 Mac 32 Linux 7 38 Win 38 Mac 37 Linux 25 Win 25 Mac 14.8 Win 14.8 Mac
transition-delay
 No Yes Yes Yes Yes Yes Yes
transition-duration
 No Yes Yes Yes Yes Yes Yes
transition-property
 No Yes Yes Yes Yes Yes Yes
transition-timing-function
 No Yes Yes Yes Yes Yes Yes
transitionend event
 No Yes Yes Yes Yes Yes Yes
Zooming
Zooming should NOT trigger transitions. However, it does in some browsers 		- Yes Almost Buggy Buggy Buggy Buggy

The Blink-based browsers transition the borders of an element when you zoom. This should not happen.

In text-zoom mode only (View -> Zoom -> Zoom text only), Firefox transitions the font-size from a way-too-big value to the correct one. This should not happen. It does not happen in normal zoom.
Implied values
When certain declarations, such as left or border are entirely absent, does the browser correctly handle their implied values? 		- Incomplete Incomplete Incomplete Yes Yes Yes

IE, Firefox, and Safari each have their own problems with implied values. See the page for details.
Method or property Internet Explorer Firefox Safari Chrome Opera Yandex
7 and lower 8 9 10 11 33 Win 33 Mac 32 Linux 7 38 Win 38 Mac 37 Linux 25 Win 25 Mac 14.8 Win 14.8 Mac

Vendor prefixes and basic test

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

No prefix

-webkit-

-moz-

-ms-

-o-

Tested browsers

Desktop browser test array 2.0.2; October 2014

IE7 and lower
I removed them, so they’re not tested for newer methods and properties that they don’t support anyway. However, I copy all information from older versions of the Tables.
If IE8 supports a method or property I never tested before I have to guess if IE7 and lower also support it. In general I assume they support the Microsoft-invented properties, but for others I will occasionally have to add a "Don’t know" entry. If IE8 does not support something I never tested before, I assume IE7 and lower also don’t support it.
IE 8, 9, and 10
Trident
On separate Windows 7 virtualizations
IE11
Trident
On Windows 8.1 virtualization
On Surface
Firefox
Gecko 33/32
33 on Win7 and Mac; 32 on Linux (can’t update)
Safari
WebKit
7.0.5 on Mac
Chrome
Chromium 38/37
38 on Win7 and Mac; 37 on Linux (can’t update)
Opera 24
Chromium 38
25.0 on Win7 and Mac
Yandex 14
Chromium 36
14.8 on Win7
14.8 on Mac

Operating systems

Mac
MacBook Pro 17'' with OS 10.9.4
This is my main test station. It also runs all virtual Windows systems.
Windows
All downloaded from modern.ie. I use VirtualBox, and downloded the Windows 7 systems for all browsers but IE11, which runs on Windows 8.1.
The non-IE Windows browsers all run on the IE9/Win7 virtualization.
Surface
Microsoft Surface with Windows RT 8.1
Linux
Ubuntu 12.04 on pretty old hardware. Not fair for performance comparisons.