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 should be specified first because, by default, it will be 0s and the property will not have an effect.

The properties are separated by commas.

If more than one transition is specified and any of the transitions have "none" as the transition-property, then the declaration is not valid.

The transition properties allow 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.

For maximum browsers compatibility extensions 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 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

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

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

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        width: 150px;
        height: 100px;
        background: #8ebf42;
        -webkit-transition: width 2s;
        -moz-transition: width 2s;
        -o-transition: width 2s;
        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:

<!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;
        -webkit-transition: left 1s ease-in-out, background-color 1s ease-out 1s;
        -moz-transition: left 1s ease-in-out, background-color 1s ease-out 1s;
        -o-transition: left 1s ease-in-out, background-color 1s ease-out 1s;
        transition: left 1s ease-in-out, background-color 1s ease-out 1s;
      }
      .example:hover .element {
        left: 400px;
        background-color: #1c87c9;
      }
      .element-2 {
        -webkit-transition: none;
        -moz-transition: none;
        -o-transition: none;
        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.