Child

CSS3 Transitions Effects


« Previous Next Chapter »

WebKit

transition is such a property of CSS3, which is used to animate the object, without using flash or any other animation application. With this feature of CSS3 You can change the shape and size of your object with animated effects.

The all measure browser supports transition feature except of Internet Explorer.

How does it work?

CSS3 transitions are effects that let an element gradually change from one style to another.

To do this, you must specify two things:

  • Specify the CSS property you want to add an effect to
  • Specify the duration of the effect.

It gradually change an object style to another style, The two thing we have to remember, the first one is to, we have to specify a css property what we want to take effect, and second one is, we have to specify the time duration of taking effect

Example:

Hover the div to see the transition effect

Here is the code:

div
{
width:80px;
height:80px;
background:green;
transition:width 2s;
-moz-transition:width 2s; /* For Firefox 4 */
-webkit-transition:width 2s; /* For Safari and Chrome */
-o-transition:width 2s; /* For Opera */
}
div:hover
{
width:200px;
}

Another Example:

Hover the div to see the transition effect

Here is the code:

div
{
width:80px;
height:80px;
background:green;
transition:width 2s, height 2s;
-moz-transition:width 2s, height 2s, -moz-transform 2s; /* For Firefox 4 */
-webkit-transition:width 2s, height 2s, -webkit-transform 2s; /* For Safari and Chrome */
-o-transition:width 2s, height 2s, -o-transform 2s; /* For Opera */
}
div:hover
{
width:200px;
height:200px;
transform:rotate(105deg);
-moz-transform:rotate(105deg); /* For Firefox 4 */
-webkit-transform:rotate(105deg); /* For Safari and Chrome */
-o-transform:rotate(105deg); /* For Opera */
}