CSS3 Tutorial-Transition

Front-end development of the small partners, we met again. As you know, in the world of CSS2, transitions are often very thin, either from one color to another, or from opacity to transparency, in a way that changes from one state to another. This leads to a lot of pages giving people a sense of being abrupt, without a smooth transition.

CSS3 has now been added to WebKit, and now Apple Safari and Google Chrome have started to support it. To push forward for a few more months, at that time people were still arguing about whether to write these transitions in CSS3, some insist that the transition is not a style attribute and should be handled with a script. Through the efforts of many people, style is not limited to static style, dynamic style is also very much needed.

Step into the chase!

CSS3 Transition:

With CSS3, we can add an effect to an element when the element is transformed from one style to another without using Flash animation or JavaScript.

Browser support:

Internet Explorer 10, Firefox, Chrome, and Opera support transition properties.

Safari requires a prefix of-webkit-.

Note: Internet Explorer 9 and earlier versions do not support the transition property.

Note: Chrome 25 and earlier versions require a prefix of-webkit-.

How does it work?

CSS3 transitions are the effects of an element gradually changing from one style to another.

To achieve this, two elements must be established:

1. Specify which CSS property you want to add the effect to;

2. The length of the specified effect.

Instance:

The transition effect applied to the Width property with a duration of 2 seconds:

Div{transition:width 2s;-moz-transition:width 2s,/* Firefox 4 */-webkit-transition:width 2s,/* Safari and Chrome */-o-t Ransition:width 2s; /* Opera */}

Note: If the length is not specified, there will be no transition effect, because the default value is 0.

The effect starts when the specified CSS property changes value. The typical time for a CSS property change is when the mouse pointer is over an element:

Instance:

Specifies that when the mouse pointer hovers over the <div> element:

div:hover{width:300px;}

Note: When the pointer moves out of an element, it gradually changes back to its original style.

Multiple changes:

To add a transition effect to multiple styles, add multiple attributes separated by commas:

Instance:

To add a transition effect to width, height, and transformation:

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

Transition properties:

The following table lists all the conversion properties:

The following two examples set all transition properties:

Instance:

Use all of the 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;}

Instance:

The transition effect is the same as the example above, but uses the shorthand transition property:

div{transition:width 1s linear 2s;/* Firefox 4 */-moz-transition:width 1s linear 2s;/* Safari and Chrome */-webkit-transi tion:width 1s linear 2s;/* Opera */-o-transition:width 1s linear 2s;}

The above is CSS3 Tutorial-the content of the transition, more relevant content please pay attention to topic.alibabacloud.com (www.php.cn)!

