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


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


Interested in helping build Docs? Read the Contribution Guide or share your thoughts in this feedback form.

Learn CSS on Codecademy