CSS transition-property Property

The transition-property specifies the names of the properties for the transition. It can be either comma-separated property names or "all" value can be used to specify all properties on an element to be transitioned.

The transition-property is one of the CSS3 properties.

Not all properties in CSS can be transitioned.

For maximum browsers compatibility extension such as -webkit- for Safari, Google Chrome, and Opera (newer versions), -moz- for Firefox, -o- for older versions of Opera are used with this property.

Initial Value all
Applies to All elements, ::before and ::after pseudo-elements.
Inherited No.
Animatable No.
Version CSS3
DOM Syntax object.style.transitionProperty = "height";

Syntax

transition-property: none | all | property | initial | inherit;

Example of the transition-property property:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style> 
      div {
      width: 100px;
      height: 100px;
      background: #666;
      -webkit-transition-duration: 1s; 
      transition-duration: 1s;
      -webkit-transition-property: height;
      -moz-transition-property: height;
      -o-transition-property: height;
      transition-property: height;
      }
      div:hover {
      height: 200px;
      }
    </style>
  </head>
  <body>
    <h2>Transition-property property example</h2>
    <p>Hover over the element to see the effect.</p>
    <div></div>
  </body>
</html>

Example of the transition-property property with transitioned width and height:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style> 
      div {
      width: 100px;
      height: 100px;
      background: #666;
      -webkit-transition-duration: 1s; 
      -webkit-transition-property: width, height;
      -moz-transition-property: width, height;
      -o-transition-property: width, height;
      transition-property: width, height;
      transition-duration: 1s;
      }
      div:hover {
      width: 200px;
      height: 200px;
      }
    </style>
  </head>
  <body>
    <h2>Transition-property property example</h2>
    <p>Hover over the element to see the effect.</p>
    <div></div>
  </body>
</html>

Example of the transition-property property with a transitioned background color:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style> 
      div {
      width: 100px;
      height: 100px;
      background-color: #666666;
      -webkit-transition-duration: 1s; 
      transition-duration: 1s;
      -webkit-transition-property: background-color;
      -moz-transition-property: background-color;
      -o-transition-property: background-color;
      transition-property: background-color;
      }
      div:hover {
      background-color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Transition-property property example</h2>
    <p>Hover over the element to see the effect.</p>
    <div></div>
  </body>
</html>

Example of the transition-property property with transitioned background color and left position offset transition:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style> 
      .element {
      padding: 1em;
      width: 30px;
      height: 30px;
      left: 0;
      cursor:pointer;
      background-color: #8ebf42;
      position: relative;
      -webkit-transition-property: background-color, left;
      transition-property: background-color, left;
      -webkit-transition-duration: 1s, 1s;
      transition-duration: 1s, 1s;
      -webkit-transition-timing-function: ease-out, cubic-bezier(.82, .1, .14, 1);
      transition-timing-function: ease-out, cubic-bezier(.82, .1, .14, 1);
      }
      .element:hover {
      left: 250px;
      background-color: purple;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <p>Hover over the box to see the element's background color and left position offset transition.</p>
      <div class="element"></div>
    </div>
  </body>
</html>

Example of the transition-property property with transitioned font:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style> 
      span{
      display:inline-block;
      font-family:sans-serif;
      -webkit-transition-duration: 0.6s; 
      transition-duration: 0.6s;
      letter-spacing:1; 
      font-size:20px;
      line-height:28px;
      color:#777777;
      -webkit-transition-property: letter-spacing, font-size, line-height;
      -moz-transition-property: letter-spacing, font-size, line-height;
      -o-transition-property: letter-spacing, font-size, line-height;
      transition-property: letter-spacing, font-size, line-height;
      }
      span:hover{
      color:#0f9881;
      letter-spacing:6;
      font-size:26px;
      line-height:34px;
      }
    </style>
  </head>
  <body>
    <h2>Transition-property property example</h2>
    <span>Hover over the text to see the effect</span>
  </body>
</html>

Values

Value Description
none No transition effect will appear.
all Transition effect will apply on all the properties.
property Specifies a comma separated list of CSS property names for transition effect.
initial Sets this property to its default value.
inherit Inherits this property from its parent element.

Browser support

26.0+
1.0 -webkit-
12.0+ 16.0+
4.0 -moz- 49.0 -webkit-
6.1+
3.0 -webkit-
12.1+
15.0 -webkit-

Practice Your Knowledge

Which statement is correct about transition-property?



Do you find this helpful?

Related articles