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 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 this resource.
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.