Shulou(Shulou.com)06/02 Report--

This article mainly introduces what are the excessive attributes in css3. It is very detailed and has a certain reference value. Friends who are interested must finish it!

Css3 excessive attributes are: 1, transition-property attribute; 2, transition-duration attribute; 3, transition-timing-function attribute; 4, transition-delay attribute; 5, transition attribute.

The operating environment of this tutorial: windows7 system, CSS3&&HTML5 version, Dell G3 computer.

Css3 transition allows us to change from one attribute value to another in a limited period of time.

There are 5 css3 transition attributes:

Property describes the CSStransition shorthand property, which is used to set four transition properties in one property. 3transition-property specifies the name of the CSS attribute to which the transition is applied. 3transition-duration defines how long it takes to transition the effect. The default is 0. 3transition-timing-function specifies the time curve of the transition effect. Default is "ease". The 3transition-delay specifies when the transition effect begins. The default is 0. three

Example:

Use all transition properties in one example:

Div {width: 100px; height: 100px; background: red; transition-property: width; transition-duration: 1s; transition-timing-function: linear Transition-delay: 2s; / * Safari * /-webkit-transition-property: width;-webkit-transition-duration: 1s;-webkit-transition-timing-function: linear -webkit-transition-delay: 2s;} div:hover {width: 200px;}

Move the mouse over the div element to see the transition effect.

Note: the transition effect needs to wait two seconds before it begins.

The transition effect is the same as the example above, but the abbreviated transition attribute is used:

So much transition code in div {} in the above example

Div {transition-property:width; transition-duration:1s; transition-timing-function:linear; transition-delay:2s; / * Safari * /-webkit-transition-property:width;-webkit-transition-duration:1s;-webkit-transition-timing-function:linear;-webkit-transition-delay:2s;}

In fact, it can be done with two lines of code using the abbreviated transition attribute:

Div {transition:width 1s linear 2s; / * Safari * /-webkit-transition:width 1s linear 2s;} above is all the content of this article "what are the excessive attributes in css3". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.