Web Platform CSS

Transitions

Transitions are a very powerful way to add motion to your web documents and applications. It's generally preferred to use CSS transitions rather than Javascript because browser engines can optimise CSS transitions for much higher performance - particularly important on mobile devices.

The transition property takes the general form:

.info {
  transition: property duration timing delay;
}

Where:

  • property is the name of the CSS property you want to transition,
  • duration is the time you want the transition to take, with 's' (seconds) or 'ms' (milliseconds),
  • timing is the timing function (ease, linear, ease-in, ease-out, ease-in-out, step-start, step-end), and
  • delay is the time you want to delay the beginning of the transition, with 's' (seconds) or 'ms' (milliseconds). If you leave the delay out, it will start immediately.

For example:

.info {
  transition: background-color 1s ease;
  background-color: pink;
}
.info:hover {
  background-color: red;
}

See and edit this live

The above snippet sets the colour of any element with the 'info' class to be pink, and declares that same property should be animated if it is changed. We also say that it should transition over a period of one second, using an ease function.

If you want different properties to be transitioned in different ways, just combine them with a comma ,:

.info {
  transition: background-color 1s ease,
              position 0.5s ease;
}

Easings is a useful visual guide to the different timing functions.

Not all CSS properties can be animated. Full list of animatable properties.

Rather than animating size and position CSS properties, you probably want to use CSS transforms instead.

Guides

Properties