CSS3 example of a smooth transition when hover left

This article mainly introduces the CSS3 implementation of pseudo-class hover left when the smooth transition effect example, with a certain reference value, interested can understand

Due to the animation effect added by hover pseudo-class, it will be triggered only when the mouse is placed on the element, and when the mouse leaves, the effect will be interrupted, it will appear very stiff.

Most people's idea is to use the JS onmouseover and OnMouseLeave events to achieve animation effects. In fact, it needn't be so troublesome, CSS3 can help you solve these problems.

<! DOCTYPE html>    
The effect can be added to the P element only if the P element is triggered by the hover pseudo-class.

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

At this point, we should write an identical transition effect on the original element, and will leave the animation effect of the broken off on the continuation.

<! DOCTYPE html>
At this point, no matter when the mouse leaves the element, it will return as it is.