transition-property

Back to the index.

See also this useful page about animatable (and transitionable) properties.

The transition-property is the CSS property (or properties) you want to transition. This page tests a few common ones, as well as some tricky ones.

The general rule is that the property must have numeric values: lengths, percentages, pixels, anything that’s expressed as a number. If it does not (like display or visibility) transitioning is impossible because the browser cannot calculate intermediate stages.

This is clearest with radial-gradient: this property is only transitionable if you want to go from one numeric value to another. 60% 100% (position) to 60% 50% works; farthest-corner to closest-corner does not.

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

Compatibility

Click or touch the test elements. If they change styles immediately, transitions are not supported on the indicated CSS declaration. Instead, they should change slowly.

Then click or touch the test element again. It should transition back in most circumstances.

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
background-color
Test
 No Yes Yes Yes Yes Yes Yes
background-position

Test

 No Yes Yes Yes Yes Yes Yes
 
border
Test
 No Yes Yes Yes Yes Yes Yes

This test is secretly two-fold: border-color and border-width. Note that the default styles have border-width: 0 because transitions need numeric values.
border-radius
Test
 No Yes Yes Yes Yes Yes Yes
 
color
Test
 No Yes Yes Yes Yes Yes Yes
 
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
display
Test
 Fundamentally impossible
The display values are exclusively keywords, and not numbers. Hence they cannot be transitioned: there are no intermediate values.
font-size
Test
 No Yes Yes Yes Yes Yes Yes
 
height
Test
 No Yes Yes Yes Yes Yes Yes

height is tricky, since it needs numeric values. Transitioning from height: auto to height: 0, as the example below attempts does not work.

This test box has height: auto.

Instead, the element has to have a specific height. The test element on the left does: it has height: 28px, so the transition does work there.
left
Test
 No Yes Yes Yes Yes Yes Yes

The element must also have an explicit start value; so not giving it any and trusting the implied left: 0 doesn’t work.
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
letter-spacing
Test
 No Yes Yes Yes Yes Yes Yes
FF needs initial value
line-height
Test
 No Yes Yes Yes Yes Yes Yes
margin-top
Test
 No Yes Yes Yes Yes Yes Yes
 
opacity
Test
 No Yes Yes Yes Yes Yes Yes
 
outline
Test
 No Incomplete Yes Yes Yes Yes Yes
  • IE transitions the width, but sets the color to black on the second transition.
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
padding-top
Test
 No Yes Yes Yes Yes Yes Yes
 
radial-gradient

Test

 No Yes No No No No No

As usual, the difference between the two states must be defined in numbers or it won’t work. Transitioning between 60% 100% and 60% 10% is possible, but between closest-corner and farthest-corner is not.

Also, be sure to define the initial state entirely in numbers. Transitioning between 60% 100% and 60% top is possible; but not between 60% bottom and 60% 0%. Odd but true.
text-indent
Test Test Test Test Test Test Test Test Test Test
No Yes Yes Yes Yes Yes Yes
IE needs explicit value
text-shadow
Test
 No Yes Yes Yes Yes Yes Yes
width
All examples on the other test pages use width transitions. 		No Yes Yes Yes Yes Yes Yes

This page contains no width test, but all other transition pages do.
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

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.