Caution

JavaScript is disabled in your browser.
This site uses JavaScript for features such as search.
For the best experience, please enable JavaScript before browsing this site.

CSS Dictionary

Home
CSS Dictionary
transition-property

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 it is safer to include vendor prefixes when using this property. Also, note that the animation may be choppy depending on the PC specs.

Sample Code

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;

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;
}

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+ ○

Supported in all versions

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.

Details

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

Multiple properties can be specified simultaneously by separating 'transition-property' values with ','.

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;
}

If you find any errors or copyright issues, please contact us.

Home