Transition

Published Aug 8, 2021Updated Oct 31, 2022
Contribute to Docs

CSS transitions provide a way to control an animation’s speed and timing of the property changes. Instead of having property changes take effect immediately, changes in a property can take place over a period of time.

For example, if the mouse cursor hovers over a link, the link may change color or appearance, and usually the change is instantaneous. With CSS transitions enabled, changes can occur at time intervals that follow an acceleration curve, all of which can be customized.

We can control the following four aspects of an element’s transition:

  • How much time there is before a transition begins
  • How long a transition lasts
  • Which property the transition is for
  • How a transition accelerates

Transition

transition
Shorthand property that sets different properties to translate an element in a single declaration.
transition-delay
Specifies how long an element should wait before beginning a transition.
transition-duration
Specifies how long an elements transition should take to complete.
transition-property
Specifies the property or properties of an element that a transition effect should apply to.
transition-timing-function
Specifies the speed of a transition effect over the course of its duration.

All contributors

Looking to contribute?

Learn CSS on Codecademy