To use this website fully, you first need to accept the use of cookies. By agreeing to the use of cookies you consent to the use of functional cookies. For more information read this page.

CSS transitions

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:

CSS
a:hover {
	color: green;
}
								

With the transition property, it is possible to slow this effect down. The transition property has the syntax:

CSS
transition property_name duration
								

It can be applied to the link example as shown below (over a duration of 2 seconds):

CSS
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:

CSS
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).

Provide feedback on this page
Comments are sent via email to me.