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
- WBOYOriginal
- 2021-12-10 09:54:538419browse
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; }".
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:
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!