transition-property, implied values

Back to the index.

Transitions only work on CSS declarations that have a numerical value; such as left: 20px to left: 200px. However, there are a few cases where a CSS declaration may have an implied value. This page discusses and tests them.

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
 - Yes Yes Yes Yes Yes Yes

All browsers interpet background-color: transparent as opacity: 0. Thus the color value itself doesn’t do a transition: it goes from undefined to red in one step. The opacity, however, transitions from 0 to 1.
border
Test
 - Yes Yes Yes Yes Yes Yes

When doing the test you’ll see that all browsers handle the first one, from none to a border, correctly, but don’t do the second one, from border to none, at all.

What’s going on here is that the first transition sets the border-style from none to solid. This is not a transition: the new style is applied directly. However, the border-color transitions from the text color to red and border-width from 0 to 5.

When going the other way, the border-style is immediately set to none, which hides the border and thus makes the color and width transition invisibile.

Thus, although the test may seem to have weird effects, the browsers actually do the right thing.
left
Test
Should not work 		- No No Incorrect No No No
The default left value is not 0 but auto, which is not a numerical value and thus untransitionable. Safari’s interpretation of auto = 0 is incorrect.
letter-spacing
Test
 - Yes No Yes Yes Yes Yes

The default letter-spacing is normal, which should compute to 0, which is transitionable. Therefore Firefox appears to be in the wrong here.
outline
Test
 - No Incomplete Yes Yes Yes Yes

outline should work the same as border; see above.

However, Firefox doesn’t transition outline-width from its implied 0 value to 5. This appears to be a bug. IE doesn’t transition outlines at all, which is also a bug.
padding-top
Test
 - No Yes Yes Yes Yes Yes Yes

padding always has a numeric value, so IE10’s refusal to transition is a mystery to me. Maybe it’s an oddity in my specific install.
text-indent
Test Test Test Test Test Test Test Test
 - No Yes Yes Yes Yes Yes

text-indent always has a numeric value (default is 0), so IE’s refusal to transition is a bug.
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.