transition-property

Allows you to individually specify which properties you want to apply the 'transition' animation effect to.

Depending on the browser version, it may not work without vendor prefixes such as 'webkit', 'moz', 'ms', etc., so including vendor prefixes when using this property is a common practice. Also, the animation may be choppy depending on the PC specs.

Sample Code

/* Transition only the width */
.box { transition-duration: 0.5s; transition-property: width;}

/* all: apply transition to every property that changes */
.item { transition-duration: 0.3s; transition-property: all;}

/* none: disable transitions */
.no-anim { transition-property: none;}

/* Transition only background-color */
.btn { transition-duration: 0.3s; transition-property: background-color;}

/* Specify multiple properties separated by commas */
.card { transition-property: transform, opacity, box-shadow; transition-duration: 0.3s;}

Browser Display Result

div {
	background :#f00;
	width: 200px;
	transition: 0.5s;
	-webkit-transition: 0.5s;
	-moz-transition: 0.5s;
	-ms-transition: 0.5s;

	transition-property: width;
	-webkit-transition-property: width;
	-moz-transition-property: width;
	-ms-transition-property: width;
}
div:hover{
	width: 300px;
	background: #ff0;
}

Details

div {
	background :#f00;
	width: 200px;
	height: 50px;
	transition: 0.5s;
	-webkit-transition: 0.5s;
	-moz-transition: 0.5s;
	-ms-transition: 0.5s;

	transition-property: width, height;
	-webkit-transition-property: width, height;
	-moz-transition-property: width, height;
	-ms-transition-property: width, height;
}
div:hover {
	width: 300px;
	height: 200px;
	background: #ff0;
}

Common Mistakes

Specifying a non-animatable property

Not all CSS properties support transitions. For example, the 'display' property has discrete values (none/block/etc.) and cannot be animated. Animatable properties are those that can be expressed as numeric values (colors, sizes, positions, etc.).

/* NG: display cannot be transitioned — switches instantly */
.box {
    display: block;
    transition-property: display;
    transition-duration: 0.3s;
}

The corrected version looks like this:

/* OK: Use opacity or visibility for animated show/hide */
.box {
    opacity: 1;
    transition-property: opacity;
    transition-duration: 0.3s;
}
.box.hidden { opacity: 0; }

Specifying transition-property without transition-duration

When specifying 'transition-property' individually, 'transition-duration' must also be set. The default value of duration is '0s', so without it, no animation occurs.

/* NG: duration is 0s by default, so no animation occurs */
.box { transition-property: background-color; }

/* OK: Also specify duration */
.box { transition-property: background-color; transition-duration: 0.3s; }

Browser Compatibility

Desktop

Chrome

26+ ○

25 △

24 △

23 △

22 △

21 △

20 △

19 △

18 △

↑ Requires prefix '-webkit-'

Firefox

16+ ○

15 △

14 △

13 △

12 △

11 △

10 △

9 △

8 △

↑ Requires prefix '-moz-'

3 and earlier ×

Safari

9+ ○

8 △

7 △

6 △

5 △

4 △

↑ Requires prefix '-webkit-'

2 and earlier ×

Edge

12+ ○

IE

11 ○

10 ○

9 ×

8 ×

7 ×

6 ×

Opera

12.1+ ○

10 and earlier ×

Mobile

iOS Safari

9+ ○

8 △

7 △

6 △

5 △

4 △

3 △

2 △

↑ Requires prefix '-webkit-'

1 and earlier ×

Android Browser

4.4+ ○

3 and earlier ×

Chrome Android

Latest ○

Same support as desktop

Firefox Android

Latest ○

Same support as desktop

※ Version data is based on MDN / Can I Use.

Home

Tweet

シェアする