CSS transition Property

The transition CSS property is a shorthand property for the following properties:

The transition property is one of the CSS3 properties.

The transition-duration and transition-delay values can be specified in any order. However, if transition-duration is omitted, it defaults to 0s, which prevents the transition from animating.

The properties are separated by commas.

Info

The value none is valid and disables transitions for the specified properties.

The transition property allows specifying the transition between two states of an element. Different states may be defined using pseudo-classes like :hover or :active or with the help of JavaScript.

Info

Vendor prefixes like -webkit-, -moz-, and -o- are legacy and generally not required for modern browsers.

Initial Value	all 0s ease 0s
Applies to	All elements, ::before and ::after pseudo-elements.
Inherited	No.
Animatable	No.
Version	CSS3
DOM Syntax	Object.style.transition = "all 3s";

Syntax

Syntax of CSS transition Property

transition: transition-property | transition-duration | transition-timing-function |  transition-delay | initial | inherit;

Example of the transition property with the :active pseudo class:

Example of CSS transition Property

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        width: 150px;
        height: 100px;
        background: #8ebf42;
        transition: width 2s;
      }
      div:active {
        width: 600px;
      }
    </style>
  </head>
  <body>
    <h2>Transition property example</h2>
    <p>Click and hold to see the transition effect.</p>
    <div></div>
  </body>
</html>

Try it Yourself »

Example of the transition property with the :hover pseudo class:

Example of CSS transition Property with :hover pseudo class

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background-color: #fff;
        color: #000;
        font-size: 1em;
        font-family: 'Roboto', Helvetica, sans-serif;
      }
      .element {
        padding: 20px;
        width: 50px;
        height: 50px;
        left: 0;
        background-color: #8ebf42;
        position: relative;
        transition: left 1s ease-in-out, background-color 1s ease-out 1s;
      }
      .example:hover .element {
        left: 400px;
        background-color: #1c87c9;
      }
      .element-2 {
        transition: none;
      }
    </style>
  </head>
  <body>
    <h2>Transition property example</h2>
    <div class="example">
      <p>Hover over the container to see the transition effect.</p>
      <div class="element element-1"></div>
      <p>No transition:</p>
      <div class="element element-2"></div>
    </div>
  </body>
</html>

Try it Yourself »

Values

Value	Description
transition-property	Specifies the names of the properties for the transition.
transition-duration	Specifies the duration of the transition animation.
transition-timing-function	Specifies the speed over time of an object being transitioned from one value to another.
transition-delay	Specifies the amount of time to wait before a transition effect is animated.
initial	Makes the property use its default value.
inherit	Inherits the property from its parents element.

Practice

What properties of CSS Transition can be changed?