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
- Shorthand property that sets different properties to translate an element in a single decleration.
- 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.
- Anonymous contributors
Learn CSS on Codecademy
- Anonymous contributorsAnonymous contributors