CSS 3 added the JavaScript-like transition property. For years, JavaScript was required to apply transitions to elements, but since CSS 3, CSS has the ability to do this too.
The transition property
The transition property is used to apply an effect over time - i.e. gradually ease
an effect into the document. This means things like links can change colour on hover but over time rather than instantly.
Before a the transition property was added, changing the colour of a link on hover was
done as shown below:
a:hover {
color: green;
}
With the transition property, it is possible to slow this effect down. The transition
property has the syntax:
transition property_name duration
It can be applied to the link example as shown below (over a duration of 2 seconds):
a:hover {
color: green;
transition: color 2s;
}
Multiple transitions simultaneously
Of course multiple transitions can be applied and the transition property permits this.
If every property specified on hover, say, background-color is also specified, then
the transition element can be changed:
a:hover {
color: green;
background-color: red;
transition: 2s;
}
By specifying only a time in the transition property, the browser
will apply the transition to all properties that are on that selector (in this case, the hover pseudo-selector on
links).
