CSS Transitions are a powerful tool for providing visual feedback to users. We’ve learned a lot about transitions, so let’s review:
CSS Transitions have 4 components:
- A property that will transition.
- The duration which describes how long the transition takes.
- The delay to pause before the transition will take place.
- The timing function that describes the transition’s acceleration.
A simple transition can be described with a property and a duration, which can be written like this:
transition-property: color; transition-duration: 1s;
Many properties’ state changes can be transitioned, including color, background color, font size, width, and height.
all is also a valid transition property that causes every changing property to transition.
The shorthand property
transition can be used to describe all four components of a transition at once. By using the comma (
,) operator, many transitions can be described in one CSS rule.
If you want to learn more about CSS Transitions, we recommend MDN’s Using CSS Transitions doc.
Good work, you now have the tools to make your web pages come to life!
Experiment with the transition values in style.css. Change the values for the duration, delay, and timing function to see what happens.