CSS3 Transitions

CSS3 Transitions allow web developers to introduce effects by allowing property changes in CSS values. These changes are generally defined to occur when certain events occur, such as :hover or :focus.

Transitions specify how they should transition and over what duration of time. Transition effects can be applied to a wide variety of CSS properties such as width, height, background color, opacity, and others.

Browser Support

Internet Explorer 9 does not support the transition property. Other browsers such as Internet Explorer 10, Firefox, Chrome, Safari, and Opera do provide support but implement vendor prefixes. So, for the time being, you will need to use several vendor prefixes in your code for a cross-browser solution.

Browser	Vendor Prefix
Internet Explorer 10	`-ms-transition`
Firefox	`-moz-transition`
Opera	`-o-transition`
Safari	`-webkit-transition`
Chrome	`-webkit-transition`

How do Transitions Work?

CSS3 transitions are effects that let an element gradually change from one style to another. To accomplish this effect, you need to specify the CSS property you want to add an effect to and the duration of the effect.

Transition Property

The transition property is a shorthand property for setting the four transition properties into a single property.

Property	Description
`transition`	A shorthand property for setting the four transition properties into a single property.
`transition-property`	Specifies the name of the CSS property to which the transition is applied.
`transition-duration`	Defines the length of time that a transition takes. Default value is `0`. The `transition-duration` value is defined in seconds (s) or milliseconds (ms).
`transition-timing-function`	Describes how the speed during a transition will be calculated. Default value is `ease`. (`linear`, `ease`, `ease-in`, `ease-out`, `ease-in-out`, `cubic-bezier(n,n,n,n)`)
`transition-delay`	Defines when the transition will start. Default value is `0`. The `transition-delay` value is defined in seconds (s) or milliseconds (ms).

Transition Property Syntax

transition: property duration timing-function delay;

Examples

Here is a simple example that changes the width of an element using a simple transition. Since the transition-timing function value is not defined, the default value of ease will apply.

<!DOCTYPE html>
<html>
<head>
    <style> 
        div {
            border:1px solid black;
            width:100px;
            height:100px;
            background:#FFAA00;
            -moz-transition:width 3s;
            -webkit-transition:width 3s;
            -o-transition:width 3s;
            transition:width 3s;
        }

        div:hover {
            width:500px;
        }
    </style>
</head>
<body>
    <div></div>
    <p>Hover over the div element above, to see the transition effect.</p>
</body>
</html>

Here is an example that shows the different timing functions.

<!DOCTYPE html>
<html>
<head>
    <style> 
        #main {
            width: 520px;
        }

        #main div {
            width: 100px;
            margin: 5px 0;
            padding: 5px;
            color: white;
            background-color: #ffaa00;
            text-align: right;
            border-radius: 5px;
        }

        #main:hover div {
            width: 500px;
        }

        #main div#ease {
            -webkit-transition: 3s ease;
            -moz-transition: 3s ease;
            -o-transition: 3s ease;
            -ms-transition: 3s ease;
            transition: 3s ease;
        }

        #main div#linear {
            -webkit-transition: 3s linear;
            -moz-transition: 3s linear;
            -o-transition: 3s linear;
            -ms-transition: 3s linear;
            transition: 3s linear;
        }

        #main div#easein {
            -webkit-transition: 3s ease-in;
            -moz-transition: 3s ease-in;
            -o-transition: 3s ease-in;
            -ms-transition: 3s ease-in;
            transition: 3s ease-in;
        }

        #main div#easeout {
            -webkit-transition: 3s ease-out;
            -moz-transition: 3s ease-out;
            -o-transition: 3s ease-out;
            -ms-transition: 3s ease-out;
            transition: 3s ease-out;
        }

        #main div#easeinout {
            -webkit-transition: 3s ease-in-out;
            -moz-transition: 3s ease-in-out;
            -o-transition: 3s ease-in-out;
            -ms-transition: 3s ease-in-out;
            transition: 3s ease-in-out;
        }
    </style>
</head>
<body>
    <div id="main">
        <div id="linear" style="top:100px">linear</div>
        <div id="ease" style="top:150px">ease</div>
        <div id="easein" style="top:200px">ease-in</div>
        <div id="easeout" style="top:250px">ease-out</div>
        <div id="easeinout" style="top:300px">ease-in-out</div>
    </div>
</body>
</html>

Multiple Transitions

To add a transitional effect for more than one style, add more properties, separated by commas

<!DOCTYPE html>
<html>
<head>
    <style> 
        div {
            border:1px solid black;
            width:100px;
            height:100px;
            background:#FFAA00;
            -moz-transition:width 3s, height 3s;
            -webkit-transition:width 3s, height 3s;
            -o-transition:width 3s, height 3s;
            transition:width 3s, height 3s;
        }

        div:hover {
            width:500px;
            height:250px;
        }
    </style>
</head>
<body>
    <div></div>
    <p>Hover over the div element above, to see the transition effect.</p>
</body>
</html>