CSS transition Property

The transition property creates animations.

It does this by changing property values over a period of time.

transition is a shorthand for several other transition properties.

Example

#

An element with a transition.
Hovering over the rectangle will animate it into a circle.

<style>
  .transition {
    width: 150px;
    height: 150px;
    background-color: orangered;
    cursor: pointer;
    transition: border-radius 500ms ease;
  }

  .transition:hover {
    border-radius: 50%;
  }
</style>

<div class="transition"></div>

Using transition

The transition property creates CSS animations.

The transition is a shorthand for these properties:

Transitions occur when a property value changes from one value to another.

This will create an step-wise animation over a specified time span.

If no transition-property is provided, the transition will be applied to all animatable properties.

Syntax

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

Values

#

Value Description
transition-property Transition property name
transition-duration Time (seconds or milliseconds) the transition takes to complete
transition-timing-function The easing function for the transition
transition-delay Delay (seconds or milliseconds) before the transition starts
initial Sets the value to its default value.
inherit Inherits the property from its parent element.

More Examples

Hovering over this element starts an animation of the width.

<style>
  .transition-width {
    width: 100px;
    height: 100px;
    background-color: blueviolet;
    cursor: pointer;
    transition: width 1s;
  }

  .transition-width:hover {
    width: 350px;
  }
</style>

<div class="transition-width"></div>

Did you know?

Did you know?

Transitions and the display property

The transition property does not work with the display property.

If you want to show or hide elements, use either visibility or opacity.


Browser support

This table shows when transition support started for each browser.

Chrome
26.0 Mar 2013
Firefox
16.0 Oct 2012
IE/Edge
10.0 Sep 2012
Opera
12.1 Nov 2012
Safari
6.1 Jun 2013

You may also like

Guides