How to use CSS3 to achieve smooth transition when pseudo-class hover leaves
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!
