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

This article will explain in detail the example analysis of the transition attributes of css3. The editor thinks it is very practical, so I share it for you as a reference. I hope you can get something after reading this article.

Multiple changes

To add the transformation effect of multiple styles, the added attributes are separated by commas:

Example

Added width, height and conversion effect:

Div

{

Transition: width 2s, height 2s, transform 2s

-webkit-transition: width 2s, height 2s,-webkit-transform 2s

}

Transition attribute

The following two examples set all transition properties:

Example

Use all transition properties in one 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

}

Example

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

Div

{

Transition: width 1s linear 2s

/ * Safari * /

-webkit-transition:width 1s linear 2s

}

This is the end of this article on "sample Analysis of css3 transition attributes". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it out for more people to see.

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.