Transitions

Transitions occur when an element moves from one visual state to another. For example, hovering over a hyperlink could involve a transition from one state to another (remember the dynamic pseudoclasses).

The following example creates a 1 second transition from the default background color and font color to a blue background color with white font upon hover. When the hover state no longer applies, the changes are reversed.

HTML

<a href="">try this</a>

CSS

a:hover {
    background-color: blue;
    color: white;
    transition: 1s;
}

a:not(hover) {
    background-color: none;
    color: blue;
    transition: 1s;
}

Transition Properties

There are numerous properties for transition.

The transition-property refers to the property to be transitioned, while the transition-duration refers to the time required for the transition. The transition-timing-function refers to how the transition changes speed during the duration and accepts the values of ease, linear, ease-in, ease-in-out, or cubic-bezier. Transition-delay refers to a delay before the transition begins; interestingly this can assume a negative value, which causes the transition to visually begin in a more advanced state.

The timing functions are just mathmatical formualas; if interested please refer to this explanation or this article.

In the earlier example, the background-color and color both changed at the same pace because the transition statement used the default value of all (meaning all changes). In the following example, the background-color changes immediately, while the color changes gradually.

a:hover {
    background-color: blue;
    color: white;
    transition: color 1s;
}

In the following example, both background-color and color transition at different rates.

a:hover {
    background-color: blue;
    color: white;
    transition: color 1s;
    transition: background-color 5s;
}