Computers & ProgrammingCSS3Web Development

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.

BrowserVendor 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.

PropertyDescription
transitionA shorthand property for setting the four transition properties into a single property.
transition-propertySpecifies the name of the CSS property to which the transition is applied.
transition-durationDefines 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-functionDescribes 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-delayDefines 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>

Leave a Comment

Your email address will not be published.

Scroll to Top