CSS3 Transitions

With CSS3, we can add an effect when changing from one style to another, without using Flash animations or JavaScripts.
CSS3 transitions are effects that let an element gradually change from one style to another.

Shorthand:
transition: property_name duration timing_function delay;

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

Transition effect on the width property, duration: 2 seconds:

.moduleDefault {
transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 and above */
-webkit-transition: width 2s; /* Safari and Chrome */
-o-transition: width 2s; /* Opera */
}

Note: If the duration is not specified, the transition will have no effect, because default value is 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:

.moduleDefault:hover {
width: 300px;
}

Multiple changes:
You can also add a transitional effect for more than one style, add more properties, separated by commas.

Add effects on the width, height, and the transformation:

div
{
transition: width 2s, height 2s, transform 2s;
-moz-transition: width 2s, height 2s, -moz-transform 2s;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s;
-o-transition: width 2s, height 2s,-o-transform 2s;
}

Note: These properties are not supported in IE

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s