CSS transition-property Property

❮ Prev Next ❯

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>

Try it Yourself »

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>

Try it Yourself »

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>

Try it Yourself »

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>

Try it Yourself »

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>

Try it Yourself »

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.