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.