Thursday, May 2, 2013

Trying different types of Transitions in CSS3



This is another wonderful feature that I found in CSS3. Now, we can make small animations and transitions with the help of just CSS3 but without using flash or any other tool support. CSS3 allows adding effect when changing from one style to another. for an example, you can see some element increases its height within 5 seconds of time when you hover over it. even you can apply multiple transition effects to the same element at the same time. You will definitely enjoy trying out these examples under this post.

First of all, I don't like to bore you with coding but this time, I would like you to examine the output first. Do click the following link to view the output in the browser itself (please make sure that your browser supports all these features of HTM5 and CSS3)


OK, now let's go through the concept behind it. CSS3 transitions are effects that let an element gradually change from one style to another. To do this, you must specify two main things;


  1. Specify the CSS property you want to add an effect to (e.g :- height)
  2. Specify the duration of the effect (e.g:- within 5 seconds)
if you did not specify a time duration to apply the effect, the transition wont take place since the default value for time is considered to be 0. The effect will start when the specified CSS property changes value. A typical CSS property change would be when a user mouse-over an element:

Throughout this post, I'll explain, transitions that take place when you hover over a div element.

change color from magenta to cyan within 5 seconds when hovered over


.div1
{
width:100px;
height:100px;
border-style:dashed;
background:magenta;
border-radius:50px;

-webkit-transition:background 5s;          /*says to make a transition in background within 5 seconds*/
}

.div1:hover                     /*says when you hover over div1 class elements, change the background to cyan*/
{
background:cyan;
}

change the height to 200px within 3 seconds when hovered


.div2
{
width:100px;
height:100px;
background:blue;
border-radius:10px;

-webkit-transition:height 3s;
}

.div2:hover
{
height:200px;
}

change the width to 50px within 5 seconds when hovered and transit the color to orange


.div3
{
width:200px;
height:100px;
background:pink;
border-radius:10px;

-webkit-transition:width 5s,background 5s;

}

.div3:hover
{
width:100px;
background:orange;
}

Performing multiple transitions


/*once hovered, do the following
    change the color from green to blue
    increase the width from 100px to 150px
    increase the height from 100 px to 150 px
    rotate the shape 360 degrees
    do all of the above within 7 seconds
*/

.div4
{
width:100px;
height:100px;
background:cyan;
border-color:Blue;
border-bottom-style:solid;
border-radius:50px;
-webkit-transition:width 7s,height 7s,background 7s, -webkit-transform 7s, border-color 7s;

}

.div4:hover
{
width:150px;
height:150px;
background:blue;
border-color:cyan;
-webkit-transform:rotate(360deg);
}

following code shows how you need to use these div elements in your html page


    <h3>
    Hover over me, I change my color :)
    </h3>

    <div class=div1></div>

    <h3>
    Hover over me, my height increases
    </h3>
    <div class=div2></div>

    <h3>
    Hover over me, my width increases and color changes
    </h3>
    <div class=div3></div>

    <h3>
    Hover over me, I make lot of transitions
    </h3>
    <div class=div4></div>