Transitions in CSS3
A distinguishing feature of CSS3 is that with CSS3, we can add an effect of changing from one style to another, without using Flash animations or JavaScripts. This is known as transition effect. The power of this feature is quite evident since it removes the burden of several other extraneous concepts from web programming. Basically, CSS3 transitions are effects that let an element gradually change from one style to another. Two important things need to be specified to execute this. The CSS property you want to add an effect to and the duration of the effect. For example, consider the following piece of code:
|
1 2 3 4 5 6 |
div { transition: width 2s; -moz-transition: width 2s; /* Firefox 4 */ -webkit-transition: width 2s; /* Safari and Chrome */ -o-transition: width 2s; /* Opera */ } |
The above code brings about transition effect on the width property with duration of 2 seconds. However, 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:
|
1 2 3 |
div:hover { width:300px; } |
Multiple transitions can also be brought about on a single page. To add a transitional effect for more than one style, add more properties, separated by comma. For example:
|
1 2 3 4 5 6 |
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; } |
According to the above code, transitions would take place after consecutive 2 seconds.
Many of these transitions properties are not supported by default by jQuery animation, making CSS transitions much more useful out of the box. In addition, iOS hardware accelerates animations that don’t require repaints, namely opacity and transforms.
BlueHost | HostGator | Media Temple
