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.

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

<!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>

Another example where the width and the height of the element are transitioned:

Example

<!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>

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.

Practice Your Knowledge

Which statement is correct about transition-property?




Related articles