To create a simple transition in CSS, we must specify two of the four aspects:
- The property that we want to transition.
- The duration of the transition.
a { transition-property: color; transition-duration: 1s; }
In the example above, transition-property
declares which CSS property we will be animating, the text color. The second property, transition-duration
, declares how long the transition will take — one second.
Many properties’ state changes can be transitioned. The type of transition depends on the property you choose. For a complete list of all animated properties, see this resource.
Different properties transition in different ways, for example:
- Color values, like
color
andbackground-color
, will blend to a new color. - Length values like
font-size
,width
, andheight
will grow or shrink.
Duration is specified in seconds or milliseconds, such as 3s
, 0.75s
, 500ms
. The default value is 0s
, or instantaneous, as if there is no transition.
When choosing a duration, think about how long actions take in real life. For example, a human eye blink takes around 400ms. People might expect the animation of clicking a button to be as sudden as a blink.
Instructions
The background-color
transition we implemented in the last exercise is a little slow. The user may move their mouse away before they notice the color changing!
Change the duration to 200 milliseconds.
That was blazing fast! Set the duration to a happy medium of 750 milliseconds.
Ultimately, it’s up to you how long your animation takes; there is no right or wrong value. Experiment and have fun!