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.
Contribute to Docs
- Learn more about how to get involved.
- Edit this page on GitHub to fix an error or make an improvement.
- Submit feedback to let us know how we can improve Docs.
