CSS3 Transitions

March 25, 2015
by Inaam Hussain

In CSS3 using transition we can change style of an element from one to another. without using flash or javascript.

CSS3 Transition Includes

For transition we can specify following two things.

  1. Property of css for effects
  2. Duration of effects
CSS
div {
    width: 300px;
    height:200px;
    display:block;
    background-color:#1FA67A;
    -webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
    transition: width 2s;
}
div:hover {
    width: 400px;
}

In above code we have created a div block with height, width & transition(i.e: transition: width 2s). so on hover of that div width will increase based on transition width and duration of 2sec.

 

Multiple Transition Changes

To add transition effects for more than one CSS property, separate the properties with a comma.

CSS
div {
    transition: width 2s, height 2s, transform 2s;
    -webkit-transition: width 2s, height 2s,-webkit-transform 2s;  /* For Safari 3.1 to 6.0 */
}

 

Transition With different properties

We can add different transition attribute like property, duration, timing-function, delay.

CSS
div {
    /* Standard syntax */
    transition-property: width;
    transition-duration: 1s;
    transition-timing-function: linear;
    transition-delay: 2s;
    /* For Safari 3.1 to 6.0 */
    -webkit-transition-property: width;
    -webkit-transition-duration: 1s;
    -webkit-transition-timing-function: linear;
    -webkit-transition-delay: 2s;
}

 

Full HTML & CSS Code

HTML & CSS
<!DOCTYPE html>
<html>
    <head>
        <style>
            div {
                width: 300px;
                height:200px;
                display:block;
                background-color:#1FA67A;
                -webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
                transition: width 2s;
            }
            div:hover {
                width: 400px;
            }
        </style>
    </head>
    <body>
    <div>Hover over me to see the transition effect!</div>
    <p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>
    </body>
</html>

 

About

Engineer. Blogger. I like to be updated on new upcoming emerging technologies.

Free PDF

Subscribe and get AngularJS Tips PDF. We never spam!
First Name:
Email:

Leave a Comment