CSS3 - transitions

Transitions

Back to the index.

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

Last major update on 5 November 2014.

	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
Basics See below for a test	Yes	-webkit-	Yes	-webkit-	-webkit-	No	Yes	-webkit-	No	Yes	Yes
Android WebKit 4.2 and higher also support the unprefixed declarations.
transition-delay	Yes	Yes	Yes	Yes	Yes	-	Yes	-	Yes	Yes

transition-duration	Yes	Yes	Yes	Yes	Yes	-	Yes	-	Yes	Yes

transition-property	Yes	Yes	Yes	Yes	Yes	-	Yes	-	Yes	Almost	Yes
Firefox on Android, but not on Firefox OS, handles quite a few transitions in a very ugly and jaggy way. See page for details.
transition-timing-function	Yes	Incomplete	Yes	Yes	Incomplete	Yes	-	Yes	-	Yes	Yes
Android 2 doesn’t support custom cubic bezier functions or step functions. Android 4, BlackBerry 6/7 don’t support custom cubic bezier functions.
transitionend event	Yes	-webkit-	Yes	-webkit-	-webkit-	-	Yes	-webkit-	-	Yes	Yes
Android WebKit 4.3 supports only the unprefixed event; anything before that only the prefixed one.
Implied values When certain declarations, such as `left` or `border` are entirely absent, does the browser correctly handle their implied values?	left	left	left	Yes	left	left	-	Yes	left	-	Incomplete	Incomplete
IE doesn’t transition outline and text-indent, while it should. Firefox doesn’t transition letter-spacing and outline-width, while it should.
	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

Basics

See below for a test

Yes

-webkit-

Yes

-webkit-

Yes

-webkit-

Yes

Android WebKit 4.2 and higher also support the unprefixed declarations.

transition-delay

Yes

transition-duration

Yes

transition-property

Yes

Almost

Yes

Firefox on Android, but not on Firefox OS, handles quite a few transitions in a very ugly and jaggy way. See page for details.

transition-timing-function

Yes

Incomplete

Yes

Incomplete

Yes

Android 2 doesn’t support custom cubic bezier functions or step functions.
Android 4, BlackBerry 6/7 don’t support custom cubic bezier functions.

transitionend event

Yes

-webkit-

Yes

-webkit-

Yes

-webkit-

Yes

Android WebKit 4.3 supports only the unprefixed event; anything before that only the prefixed one.

Implied values

When certain declarations, such as left or border are entirely absent, does the browser correctly handle their implied values?

left

Yes

left

Yes

left

Incomplete

IE doesn’t transition outline and text-indent, while it should.
Firefox doesn’t transition letter-spacing and outline-width, while it should.

iOS

Android

Chromium

BlackBerry

Nokia Xpress

UC Mini

Opera

Nintendo

Dolphin

Firefox

Puf

Xia

Mini

Classic

And

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

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!