Monday 26 December 2011

css3 Transitions - Multiple changes

Multiple changes:
 To add a transitional effect for more than one style, add more properties, separated by commas:

Syntax:   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;
 }

 The two examples below sets all transition properties:
 Example:1

 Use all transition properties in one example:
 div
 {
 transition-property: width;
 transition-duration: 1s;
 transition-timing-function: linear;
 transition-delay: 2s;
 /* Firefox 4 */
 -moz-transition-property:width;
 -moz-transition-duration:1s;
 -moz-transition-timing-function:linear;
 -moz-transition-delay:2s;
 /* Safari and Chrome */
 -webkit-transition-property:width;
 -webkit-transition-duration:1s;
 -webkit-transition-timing-function:linear;
 -webkit-transition-delay:2s;
 /* Opera */
 -o-transition-property:width;
 -o-transition-duration:1s;
 -o-transition-timing-function:linear;
 -o-transition-delay:2s;
 }

 Example:2

 The same transition effects as above, using the shorthand transition property:
 div
 {
 transition: width 1s linear 2s;
 /* Firefox 4 */
 -moz-transition:width 1s linear 2s;
 /* Safari and Chrome */
 -webkit-transition:width 1s linear 2s;
 /* Opera */
 -o-transition:width 1s linear 2s;
 }

No comments:

Post a Comment