Example Analysis of css3 transition attribute
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.
