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

This article mainly explains "what attributes in css3 can transition", the content of the explanation is simple and clear, easy to learn and understand, now please follow the editor's ideas slowly in-depth, together to study and learn "what attributes in css3 can transition" it!

In css3, not all styles can be transitioned, and only attribute styles with intermediate values can be set; transition is the effect that elements gradually change from one style to another, and you must specify the CSS attribute to add the effect and specify the duration of the effect. The syntax is "transition: attribute name time speed delay;".

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

Can any style be transitioned in css3?

Not all styles can be transitioned in css3.

Only attribute styles with intermediate values can be overridden.

A CSS3 transition is the effect of a gradual change of elements from one style to another.

To achieve this, two things must be specified:

Specify the CSS property to which you want to add an effect

Specifies the duration of the effect.

Distance attributes that can have a transition effect:

Color: color background-color border-color outline-color position: backround-position left right top bottom length: [1] max-height min-height max-width min-width height width [2] border-width margin padding outline-width outline-offset [3] font-size line-height text-indent vertical-align [4] border-spacing letter-spacing word-spacing number: opacity visibility z-index font-weight zoom combination: text-shadow transform box-shadow clip other: gradient

Examples are as follows:

.test {border: 1px solid red; width: 100px; height: 50px; background-color: lightblue; transition: width 2s, background-color 2s ease 0.5s; / * means width duration is 2s, delay time is default 0; background-color duration 2s delay 0.5s * /} .test: hover {width: 300px; background-color: indianred;}

Output result:

Thank you for your reading, the above is the content of "what attributes in css3 can transition". After the study of this article, I believe you have a deeper understanding of what attributes in css3 can transition, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

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.