CSS3 - transition-property

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.

	iOS	Android	Chromium	UC	BlackBerry	Nokia Xpress	UC Mini	Opera	Nintendo	Dolphin	IE	Firefox
7	8	2	4	Sa	Puf	Cy	Xia	Op	Go	9	10	6	7	10	Mini	Classic	9	10	11	And	OS
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

	iOS	Android	Chromium	UC	BlackBerry	Nokia Xpress	UC Mini	Opera	Nintendo	Dolphin	IE	Firefox
7	8	2	4	Sa	Puf	Cy	Xia	Op	Go	9	10	6	7	10	Mini	Classic	9	10	11	And	OS
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

	iOS	Android	Chromium	UC	BlackBerry	Nokia Xpress	UC Mini	Opera	Nintendo	Dolphin	IE	Firefox
7	8	2	4	Sa	Puf	Cy	Xia	Op	Go	9	10	6	7	10	Mini	Classic	9	10	11	And	OS
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.
	iOS	Android	Chromium	UC	BlackBerry	Nokia Xpress	UC Mini	Opera	Nintendo	Dolphin	IE	Firefox
7	8	2	4	Sa	Puf	Cy	Xia	Op	Go	9	10	6	7	10	Mini	Classic	9	10	11	And	OS
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.
	iOS	Android	Chromium	UC	BlackBerry	Nokia Xpress	UC Mini	Opera	Nintendo	Dolphin	IE	Firefox
7	8	2	4	Sa	Puf	Cy	Xia	Op	Go	9	10	6	7	10	Mini	Classic	9	10	11	And	OS

iOS

Android

Chromium

BlackBerry

Nokia Xpress

UC Mini

Opera

Nintendo

Dolphin

Firefox

Puf

Xia

Mini

Classic

And

background-color

Test

Yes

background-position

Test

Yes

border

Test

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

color

Test

Yes

iOS

Android

Chromium

BlackBerry

Nokia Xpress

UC Mini

Opera

Nintendo

Dolphin

Firefox

Puf

Xia

Mini

Classic

And

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

Jaggy

Yes

height

Test

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

Jaggy

Yes

iOS

Android

Chromium

BlackBerry

Nokia Xpress

UC Mini

Opera

Nintendo

Dolphin

Firefox

Puf

Xia

Mini

Classic

And

letter-spacing

Test

Yes

Jaggy

Yes

line-height

Test

Yes

Jaggy

Yes

margin-top

Test

Yes

Jaggy

Yes

opacity

Test

Yes

outline

Test

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.

iOS

Android

Chromium

BlackBerry

Nokia Xpress

UC Mini

Opera

Nintendo

Dolphin

Firefox

Puf

Xia

Mini

Classic

And

padding-top

Test

Yes

Jaggy

Yes

radial-gradient

Test

Yes

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

Jaggy

Yes

text-shadow

Test

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

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

iOS

Android

Chromium

BlackBerry

Nokia Xpress

UC Mini

Opera

Nintendo

Dolphin

Firefox

Puf

Xia

Mini

Classic

And

Tested browsers

Mobile browser test array 2.0.2; November 2014

Version 2.x has quite a few changes from 1.3; see my notes.

iOS 7

WebKit 537

Default browser on iPad 2 with iOS 7.1.2

iOS 8

WebKit 600

Default browser on iPhone 4S with iOS 8.1

Android 2

WebKit 533

Default browser on HTC Legend, Android 2.2

Default browser on Samsung Galaxy Pocket, Android 2.3.6

Default browser on Sony Reader PRS-T3. I’ve heard it’s Android 2-based, but of course it’s nearly impossible to get some actual information.

Android 4

WebKit 534

Default browser on Huawei C8813, Android 4.1.1

Default browser on Samsung Galaxy Note I, Android 4.1.2

Default browser on Sony Xperia S, Android 4.1.2

Default browser on LG L5, Android 4.1.2

Default browser on Wolfgang AT-AS45FW, Android 4.2.2 (see note below)

Default browser on HTC One X, Android 4.2.2

Default browser on HTC M8, Android 4.4.2

Chromium Samsung

Blink; Chromium 28

Default browser on Samsung Galaxy S4, Android 4.4.2

This is Samsung’s Chrome.

Chromium Puffin

Blink; Chromium 30

Possibly proxy-ish browser; doesn’t make connection to my internal server, but does do some stuff client-side.

4.0 Free Edition on Samsung Galaxy Note, Android 4.1.2

Chromium Cyanogen

Blink; Chromium 33

Default browser on Galaxy Nexus flashed with Cyanogenmod 11, Android 4.4.4

This is Cyanogen’s Chrome.

Chromium Xiaomi

Blink; Chromium 34 or 35; see this blog post

Default browser on Xiaomi M2, Android 4.1.1

Chromium Opera

Blink; Chromium 38

25 on LG L5, Android 4.1.2

25 on HTC M8, Android 4.4.2

This is Opera Mobile.

Chromium Google

Blink; Chromium 38

Default browser on Nexus 7, Android 4.4.2

Default browser on Motorola Moto G, Android 4.4.4

This is Google’s regular Chrome. I test it only on devices where it is the default browser.

UC 9

WebKit 534

UC 9.9.5 on Huawei C8813, Android 4.1.1

UC 9.9.6 on Xiaomi M2, Android 4.1.1

The largest Chinese browser. This is the full Chinese variant, not the proxy. These browsers were pre-installed (next to Android WebKit; don’t ask me why).

UC 10

UC 10.0 on Samsung Galaxy S4, Android 4.4.2

This is an English install. I don’t know if that matters, but it could.

BlackBerry 6

WebKit 534

Default browser on BB Torch 9800 (OS6)

BlackBerry 7

WebKit 534

Default browser on BB Torch 9810 (OS7)

BlackBerry 10

WebKit 537

Default browser on BlackBerry Z10 (BB OS 10.1)

A new BB10 version has been released, but my device cannot connect to the update server.

This device has 1GB of internal memory instead of the customary 2GB, which may matter in performance tests.

Nokia Xpress

Gecko 20100401; this version was used for some Firefoxes from 3 to 4.

Proxy browser

5.5 on the Nokia Asha 311, S40.

UC Mini

Gecko; don’t know version number

Proxy browser

8.8 on HTC One X, Android 4.2.2

9.4 on Motorola Moto G, Android 4.4.2

9.4 on Wolfgang AT-AS45FW, Android 4.2.2 (see note below)

Opera Mini

Presto

Proxy browser

7.6 on Samsung Galaxy S4, Android 4.4.2

8.0 on BB Torch 9800 (OS6)

8.0.3 on iPad 2, iOS 7.1.2

Opera Classic

Presto

12.10 on Samsung Galaxy Pocket, Android 2.3.6

Nintendo

WebKit 536

Nintendo browser 3.0.3 on Wii U (OS version unfindable)

Supposed to be based on NetFront, which in turn is WebKit-based nowadays.

Dolphin

WebKit 534

Dolphin 11.23 with JetPack on Sony Xperia S, Android 4.1.2.

Independent full browser for Android, as long as you install both Dolphin and the Jetpack extension.

IE9

Trident

Default browser on Nokia Lumia 800, Windows Phone 7.5.

IE10

Trident

Default browser on Nokia Lumia 520, Windows Phone 8.0.

IE11

Trident

Default browser on Nokia Lumia 820, Windows Phone 8.1 “Update”

This is a developer phone. That might matter.

Firefox Android

Gecko 32

32 on LG L5, Android 4.1.2

32 on Samsung Galaxy S4, Android 4.4.2

Firefox OS

Gecko 28

Default browser on T2Mobile Flame, the FFOS reference device. 1.3.0 prerelease

Wolfgang AT-AS45FW note: Wolfgang is a Dutch importer and re-brander of phones. In this particular case they seem to have bought Chinese (? probably) phones, re-branded them, then re-sold them to the Whoop company, which re-branded them and sold them to the Hema chain of supermarkets, which sells them to consumers as the Whoop Echo. Supply chain management FTW!