Home  >  Article  >  Web Front-end  >  How to achieve mouse hover stop animation effect in css3

How to achieve mouse hover stop animation effect in css3

WBOY
WBOYOriginal
2021-12-10 09:54:538397browse

In CSS, you can use the ":hover" selector and the "animation-play-state" attribute to achieve the mouse hover stop animation effect. The syntax is "animation element:hover{animation-play-state:paused; }".

How to achieve mouse hover stop animation effect in css3

The operating environment of this tutorial: Windows 10 system, CSS3&&HTML5 version, Dell G3 computer.

How to implement mouse hover stop animation effect in css3

In css, you can use the animation attribute to bind animation to the element; and then use @ Keyframes rules set animation work.

When we play animation, if we want to pause the animation, we need to use the animation-play-state attribute. The animation-play-state attribute has two values: paused: pauses the animation; running: continues to play the animation;

We can pause the animation by selecting the state when the mouse is hovering over the element through the hover selector.

Let’s take a look at the example below. The example is as follows:

<!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>Document</title>
    <style>
        div{
            width:100px;
            height:100px;
            background-color:pink;
            animation:fadenum 5s infinite;
        }
        @keyframes fadenum{
   100%{transform:rotate(360deg);}
}
div:hover{
            animation-play-state:paused;
}
    </style>
</head>
<body>
    <div></div>
</body>
</html>

Output result:

How to achieve mouse hover stop animation effect in css3

If you are interested, you can continue to visit : css video tutorial.

The above is the detailed content of How to achieve mouse hover stop animation effect in css3. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn