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

This article mainly shows you "how to use CSS3 to achieve pseudo-class hover leave smooth transition effect", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "how to use CSS3 to achieve pseudo-class hover leave smooth transition effect" this article.

Because of the animation added by the hover pseudo-class, it will be triggered only when the mouse is over the element, but when the mouse leaves, the effect will be interrupted and appear stiff.

Most people's idea is to use js's onmouseover and onmouseleave events to achieve animation. In fact, there is no need to bother, CSS3 can help you solve these problems.

The effect is stiff when you leave

Div {

Width: 100px

Height: 100px

Border:1px solid

Margin:0px auto

Margin-top: 200px

}

Div:hover {

Transform: scale (2)

Transition: all 1s linear

}

Because the div element can be added to the div element only when the: hover pseudo-class triggers.

When the mouse leaves the div element, the: hover pseudo class will no longer take effect, instantly discarding the animation written in hover.

At this point, we should write an identical transition effect on the original element and continue the broken animation effect.

Simple solution

Div {

Width: 100px

Height: 100px

Border:1px solid

Margin:0px auto

Margin-top: 200px

Transition: all 1s linear

}

Div:hover {

Transform: scale (2)

Transition: all 1s linear

}

At this point, whenever the mouse leaves the element, it will return as is.

The above is all the contents of this article entitled "how to use CSS3 to achieve a smooth transition when pseudo-class hover leaves". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more 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.