W3docs
en
Log in

CSS transition-property Property

How to use the CSS transition-property longhand property to specify a property name for the transition effect. See property values and try examples.

The transition-property specifies the names of the properties for the transition. It accepts a comma-separated list of property names, or the all keyword to transition all properties on an element.

The transition-property is one of the CSS3 properties.

Warning

Not all properties in CSS can be transitioned.

Info

Vendor prefixes (e.g., -webkit-, -moz-, -o-) are no longer required for CSS transitions in modern browsers.

Initial Valueall
Applies toAll elements, ::before and ::after pseudo-elements.
InheritedNo.
AnimatableNo (controls which properties are animated, but is not animated itself).
VersionCSS3
DOM Syntaxobject.style.transitionProperty = "height";

Note: In modern CSS, it is recommended to use the transition shorthand property instead.

Syntax

CSS transition-property values

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

Example of the transition-property property:

CSS transition-property code example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        width: 100px;
        height: 100px;
        background: #666;
        transition-duration: 1s;
        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:

CSS transition-property another code example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        width: 100px;
        height: 100px;
        background: #666;
        transition-duration: 1s;
        transition-property: width, height;
      }
      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:

Example of transition-property with transitioned background color:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        width: 100px;
        height: 100px;
        background-color: #666666;
        transition-duration: 1s;
        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:

Example of transition-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;
        transition-property: background-color, left;
        transition-duration: 1s, 1s;
        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:

Example of CSS transition-property with letter-spacing, font-size and line-height properties

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      span {
        display: inline-block;
        font-family: sans-serif;
        transition-duration: 0.6s;
        letter-spacing: 1px;
        font-size: 20px;
        line-height: 28px;
        color: #777777;
        transition-property: letter-spacing, font-size, line-height;
      }
      span:hover {
        color: #0f9881;
        letter-spacing: 6px;
        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

ValueDescription
noneNo transition effect will appear.
allTransition effect will apply on all the properties.
propertySpecifies a comma separated list of CSS property names for transition effect.
initialSets this property to its default value.
inheritInherits this property from its parent element.

Practice

Practice

Which statement is correct about transition-property?