Learn
CSS Transitions
Duration

To create a simple transition in CSS, we must specify two of the four aspects:

  1. The property that we want to transition.
  2. 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 and background-color, will blend to a new color.
  • Length values like font-size, width, and height 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

1.

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.

2.

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!

Folder Icon

Take this course for free

Already have an account?