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

Editor to share with you what to do if the transition attribute in CSS does not work. I hope you will get something after reading this article. Let's discuss it together.

Let's first take a look at why the transition attribute in CSS doesn't work.

Transition is a property that allows you to specify when to change, and so on.

When used to set the time when the mouse cursor changes color and size over a button, it can have the same effect as an animation.

The transition format is as follows

Selector name {

Transition-property:value

}

The values you can specify are:

All: you can specify all the attributes that apply to the transformation.

None: no property changes.

Attribute name: specifies the name of the attribute to which you want to apply the transformation. You can specify multiple by comma.

Many reasons why transition doesn't work are usually transformations that describe hover events, so pay more attention to it.

Because animated motion is possible, some effects are easy to achieve using the transition property.

Let's take a look at the specific use of the transition attribute

As mentioned above, do not use the transition property in a hover event.

HTML

Text content

Text content

Text content

Text content

Text content

Text content

CSS

P {

Width:100px

Background-color:red

Transition-duration:2s

Transition-property:width

}

P:hover {

Width:420px

Background-color:blue

}

Width:100px and background-color:red; are specified in the p tag so that when the width is 100px, the background is red. Transition-duration:2s is specified below

In this case, the effect of the transtion implementation is 2 seconds from start to finish.

Finally, the effect of applying the transition attribute to transition-property:width; is only width.

Width:420px and background-color:blue are specified in hover so that when you move the mouse over it, the width changes to 420px and the background turns blue.

If you hover, the width will be 420px, the background will be blue, but the transition effect will only be width. The change of 2 seconds is only width. Because the conversion effect does not apply to the specified background color, it turns blue as long as you hover over it.

After reading this article, I believe you have a certain understanding of "what if the transition attribute in CSS does not work". If you want to know more about it, you are welcome to follow the industry information channel. Thank you for your reading!

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.