CSS transition property

The transition CSS property is a shorthand property for the following 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

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

Another example with the transition property:

Example

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

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.




Related articles