X

Headline

This is an important message requiring you to make a choice if you're based in the EU.

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

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

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