CSS transition-property

The CSS transition-property property specifies the name of the CSS property to which the transition is applied.

CSS property transition-property

CSS version: CSS 3
Value: none | single-transition-property [, single-transition-property ]*
Initial: all
Applies to: all elements, :before and :after pseudo elements
Inherited: no

Example – transition-property

In the following code, CSS property transition-property can be changed to the following values
  • background-color
  • border-color
<style type="text/css">
div {
 width: 100px;
 background-color: white;
 border: 4px solid yellow;
 transition-property: background-color;
 transition-duration: 2s;
div:hover {
 background-color: lightblue;
 border-color: blue;

  Hover me to see transition of css-property
transition-property refresh


Specification and Browser compatibility

CSS3 TransitionsW3C Working DraftCSS3
Yes 26+ Yes 16+ Yes 10+ Yes 12+ Yes 6.1+ Yes 12.1+
Android ChromeAndroid FirefoxiOS SafariIE MobileOpera Mobile
Yes 47+ Yes 44+ Yes 7.0-7.1+ Yes 10+ Yes 12.1+
source: caniuse.com
Share this article: share on Google+ share on facebook share on linkedin tweet this submit to reddit


Click here to write/view comments