Transitions

CSS transitions enable you to change CSS property values over a specified duration of time, animating the property changes, rather than having them occur immediately. CSS3 Transitions are defined by the World Wide Web Consortium (W3C) in the CSS Transitions Module Level 3 specification.

The CSS transitions include: transition, transition-property, transition-duration, transition-timing-function, and transition-delay and may be enabled by changes of state via pseudo-classes like :hover or :active or dynamically set using JavaScript. This topic provides an overview of the properties that make up CSS3 Transitions, and shows you a simple example of transitions in use.

CSS Transitions are now supported for use on SVG elements in Microsoft Edge.

The transition-property property

You use the transition-property property to identify one or more CSS properties to which the transition effect(s) will be applied when a new property value is specified. The transition-property property can either be set to a comma-separated list of CSS properties or to one of the following values:

  • none: No transition effect is applied when a new property value is specified. All transition properties are ignored.
  • all: This is the default value. Every property that supports transitions has the transition effect applied when a new value for the property is specified.
button {
  transition-property: width, height, font-size, opacity, border-radius;
}

See this example by Microsoft Edge Docs on CodePen.

Be aware that, when you interrupt a transition, it reverses automatically.

For a list of CSS properties that you can apply transitions to (including 2-D and 3-D transforms), see Animation and transition properties.

The transition-duration property

The transition-duration property defines the length of time that a transition takes, specifying one or more comma-separated time values indicating the length of time for the transition from the old value to the new value. Each value is in the form of a floating-point number, followed by a time unit designator (ms or s).

.example {
  transition-duration: 3s;
}

The transition-timing-function property

The transition-timing-function property enables a transition to change speed over its duration by describing how the intermediate values used during a transition will be calculated. You do this by specifying one or more comma-separated animation timing functions based on a cubic bézier curve, which takes four parameters.

You can either specify the curve explicitly by using the cubic-bezier function and entering the four values manually, or you can choose from several function keywords, each of which corresponds to a commonly used timing function. The possible values can be any of the following. See the transition-timing-function reference page for descriptions of each function.

  • cubic-bezier(*x₁*,*y₁*,*x₂*,*y₂*) The four parameters of this function must be floating point values between 0 and 1, inclusive. The values correspond to the x- and y-coordinates of the P₁ and P₂ points of the cubic bézier curve. For properties other than opacity and color, the cubic-bezier curve function accepts y-coordinates outside the standard range of between 0 and 1. This enables you to create "elastic" or "bounce" transition effects.
  • ease This is the default value. This timing function gradually increases in speed at the start, animates at full speed, and then gradually decreases in speed at the end.
  • linear This timing function has a consistent speed from start to end.
  • ease-in This timing function gradually increases in speed at the start.
  • ease-out This timing function gradually decreases in speed at the end.
  • ease-in-out This timing function gradually increases in speed at the start and then gradually decreases in speed at the end.
  • steps This timing function defines a stepped timing function, and takes two parameters. The first parameter specifies the number of intervals; the optional second parameter specifies the point in the interval where the property value changes. The second parameter is constrained to the values start or end, which is the default.
.example {
  transition-timing-function: cubic-bezier(.1,.8,.4,.2);
  transition-duration: 3s;
}
.example2 {
  transition-timing-function: ease-in-out;
}
.example3 {
  transition-timing-function: steps (4);
}

The transition-delay property

The transition-delay property enables you to delay the start of a transition, or make it appear as if the transition is already in progress. If the value for the transition-delay property is a negative value, the transition will execute as soon as it is applied, but will appear to have begun execution at the specified offset, or during its play cycle.

.example:hover {
  transition-delay: 3s;
}

In the example above, the user would have to hover over the element for more than 3 seconds in order to see the transition effect begin.

The transition property

The transition shorthand property combines the four transition properties described previously into a single property. The transition property values must be set in the following order:

  • transition-property
  • transition-duration
  • transition-timing-function
  • transition-delay
.example {
  transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay];
}

See the following video and CodePen for examples of using the transition property.

See this example by Microsoft Edge Docs on CodePen.

Transitions DOM Events

CSS transitions fire two DOM events that can be used by JavaScript EventListeners:

transitionstart

The transitionstart event occurs at the beginning of the transition.

transitionend

The transitionend event occurs at the completion of the transition. If the transition is removed before completion, the event will not fire.

See this example by Microsoft Edge Docs on CodePen.

This example applies transitions to a <div> element, and fires the transitionstart and transitionend events to change the text in the box.

API Reference

Transitions

Specification

CSS Transitions