Detailed explanation of examples of CSS3 implementing smooth transition when hover leaves-CSS Tutorial-php.cn

Detailed explanation of examples of CSS3 implementing smooth transition when hover leaves

巴扎黑

Release： 2018-05-28 17:36:52

Original

8558 people have browsed it

This article mainly introduces the CSS3 implementation of the smooth transition effect when the pseudo-class hover leaves. It has certain reference value. Those who are interested can learn about it.

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

Most people’s idea is to use the onmouseover and onmouseleave events of js to achieve animation effects. In fact, it doesn’t have to be so troublesome, CSS3 can help you solve these problems.

 <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>离开时效果生硬</title>
        <style type="text/css">
            p{
                width: 100px;
                height: 100px;
                border:1px solid;
    
                margin:0px auto;
                margin-top: 200px;
            }
            p:hover{
                transform: scale(2);
                transition: all 1s linear;
            }
        </style>
    </head>
    <body>
        <p></p>
    </body>
    </html>

Copy after login

Because the p element can only be added to the p element when the :hover pseudo-class is triggered.

When the mouse leaves the p element, the :hover pseudo-class will no longer take effect, and the animation effect written in hover will be lost instantly.

At this time, we should write an identical transition effect on the original element to continue the interrupted animation effect.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>简单解决</title>
    <style type="text/css">
        p{
            width: 100px;
            height: 100px;
            border:1px solid;

            margin:0px auto;
            margin-top: 200px;

            /* 在原本元素上再加一个transition */
            transition: all 1s linear;
        }
        p:hover{
            transform: scale(2);
            transition: all 1s linear;
        }
    </style>
</head>
<body>
    <p></p>
</body>
</html>

Copy after login

At this time, no matter when the mouse leaves the element, it will return unchanged.

The above is the detailed content of Detailed explanation of examples of CSS3 implementing smooth transition when hover leaves. For more information, please follow other related articles on the PHP Chinese website!