Transition

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, you can cause the changes in a property to 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 decleration.
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.
Edit this page on GitHub

Contributors

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

Learn CSS on Codecademy

Edit this page on GitHub

Contributors