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 mobile table. See also the desktop 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.

Firefox note

Firefox on Android, but not on Firefox OS, has problems with a lot of declarations, marked as "Jaggy". The transition is just not smooth, and sometimes downright ugly.

[an error occurred while processing this directive] [an error occurred while processing this directive] [an error occurred while processing this directive] [an error occurred while processing this directive] [an error occurred while processing this directive] [an error occurred while processing this directive]
background-color
Test
 Yes Yes Yes Yes Yes - Yes - Yes Yes
 
background-position

Test

 Yes Yes Yes Yes Yes - Yes - Yes Yes
 
border
Test
 Yes Yes Yes Yes Yes - Yes - Yes Jaggy 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-width: none is an interesting case. The transition from none to 5px works, but the reverse does not. I don’t know why none evaluates to 0 in one case, but not in the other. Test it below.

Test
border-radius
Test
 Yes Yes Yes Yes Yes - Yes - Yes Yes
 
color
Test
 Yes Yes Yes Yes Yes - Yes - Yes Yes
 
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
 Yes Yes Yes Yes Yes - Yes - Yes Jaggy Yes
 
height
Test
 Yes Yes Yes Yes Yes - Yes - Yes Jaggy 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
 Yes Yes Yes Yes Yes - Yes - Yes Jaggy Yes
 
letter-spacing
Test
 Yes Yes Yes Yes Yes - Yes - Yes Jaggy Yes
 
line-height
Test
 Yes Yes Yes Yes Yes - Yes - Yes Jaggy Yes
margin-top
Test
 Yes Yes Yes Yes Yes - Yes - Yes Jaggy Yes
 
opacity
Test
 Yes Yes Yes Yes Yes - Yes - Yes Yes
 
outline
Test
 Yes Yes Yes Yes Yes - Yes - Almost Jaggy Yes
  • Firefox interprets this as transitioning outline-color. It first creates the entire outline, and does not transition the width.
  • Opera interprets this as transitioning outline-width. It does not transition the color.
  • When transitioning back, IE changes the color to black immediately.
padding-top
Test
 Yes Yes Yes Yes Yes - Yes - Yes Jaggy Yes
 
radial-gradient

Test

 No - No - - - No - - Yes 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
Yes Yes Yes Yes Yes - Yes - Yes Jaggy Yes
 
text-shadow
Test
 Yes Yes Yes Yes Yes - Yes - Yes Jaggy Yes
  • Safari doesn’t transition the blurring: it is applied at once at the end of the transition.
width
All examples on the other test pages use width transitions. 		Yes Yes Yes Yes Yes - Yes - Yes Yes

This page contains no width test, but all other transition pages do.

Tested browsers

[an error occurred while processing this directive]