{ LearnWebSiteDesign.com }

HTML, XHTML CSS Tutorials and Free Website Templates

CSS Transitions Tutorial

This tutorial will cover CSS3 transitions that are practical to use across different web browsers. At the moment, not all web browsers support CSS3 transitions. On the date that this tutorial was written, only webkit browsers (Google Chrome and Apple's Safari) support CSS3 transitions.

Normally when the value of a CSS property changes, the affected elements immediately change from the old property value to the new property value. When CSS transition properties are applied, the change from the old value to the new value happens in a smooth, animated manner over a period of time, which you can specify.

Text Link CSS Transitions
CSS Transition Properties

Background CSS Transitions
Combining CSS Transition Properties

Text Link Transitions

The code below shows you how to apply a simple color change when the cursor is hovered over the text link.

a { text-decoration:underline; color:black; } a:hover { text-decoration:none; color:red; }

The results of the CSS styles above when applied to a text link is shown below.

Text Link

Now I will add the CSS3 styles to add the transition effect. Notice that the CSS3 transitions styles are applied to the "a" selector and not the "a:hover" selector.

Notice the CSS property, -webkit-transition. The -webkit prefix specifies that the property is specifically made to work only in Webkit browsers (Google Chrome and Apple Safari). Other web browsers also have their own specific CSS properties to allow support for CSS3 transitions whenever they are made available in each respective browser.

a { text-decoration:underline; color:black; -webkit-transition:color 1s ease-in; -moz-transition:color 1s ease-in; -o-transition:color 1s ease-in; transition:color 1s ease-in; } a:hover { text-decoration:none; color:red; }

The results of the CSS styles above when applied to a text link is shown below.

Text Link

After the declaration of the CSS3 transition property, the values of the declaration are: "color 1s ease-in". This is a shorthand declaration. The values represent:

The property to be transitioned
The duration of the transition
The type of transition

In this case, we transition using ease-in, which will begin the transition slowly, and speed up into the transition.

Transition Properties

The table below lists the CSS transition properties.

Property	Description	CSS Level
transition	A shorthand property to set the four transition properties in one property	3
transition-property	Specifies the name of the CSS property to which the transition will be applied	3
transition-duration	Specifies the length of time that the transition takes. The default is 0	3
transition-timing-function	Specifies the speed during the transition from one value to another. The default is ease	3
transition-delay	Defines when the transition will start. Default 0	3

Background Transitions

CSS3 transitions allow you to change the background color of an HTML element from one color value to a new color value.

a { text-decoration:underline; color:black; -webkit-transition:background-color 1s linear; -moz-transition:background-color 1s linear; -o-transition:background-color 1s linear; transition:background-color 1s linear; background-color:white; } a:hover { text-decoration:none; color:black; background-color:black; }

The results of the CSS styles above when applied to a text link is shown below.

Text Link

A practical and useful use of CSS3 transitions is to apply the transition property to input fields. The example below shows you how to have the background of color of an input field transition to a new background color.

input { color:black; background:yellow; -webkit-transition:background 1s linear; -moz-transition:background 1s linear; -o-transition:background 1s linear; transition:background 1s linear; } input:hover { background:red; }

The code above produces the input field below.

Combining Multiple CSS Transition Properties

CSS allows you to combine multiple transition properties using the longhand versions of the CSS3 transition properties.

The example below shows you how to have the color of the text transition from black to red, with a duration time of 1 second and a timing function of linear. The background color of the text transitions from yellow to blue, with a duration time of 2 seconds and a timing function of linear.

a { text-decoration:underline; color:black; -webkit-transition-property:color, background; -webkit-transition-duration: 1s, 3s; -webkit-transition-timing-function: linear, linear; -moz-transition-property:color, background; -moz-transition-duration: 1s, 3s; -moz-transition-timing-function: linear, linear; -o-transition-property:color, background; -o-transition-duration: 1s, 3s; -o-transition-timing-function: linear, linear; transition-property:color, background; transition-duration: 1s, 3s; transition-timing-function: linear, linear; background:yellow; } a:hover { text-decoration:underline; color:red; background:blue; }

The CSS code above produces the text link below when the styles are applied the selectors "a" and their hover state "a:hover".

Text Link