css3怎样实现取消动画效果
程序员文章站
2022-03-12 14:05:22
...
css中，可用“animation-play-state”属性取消动画效果，该属性可规定动画的运行暂停效果，属性的值为“paused”时动画会暂停，也就是取消动画效果，语法“元素{animation-play-state:paused}”。
本教程操作环境：windows10系统、CSS3&&HTML5版、Dell G3电脑。
css3怎样实现取消动画效果
在css中，想要实现取消动画效果，可以利用animation-play-state属性。
animation-play-state 属性规定动画正在运行还是暂停。语法如下：
animation-play-state: paused|running;
其中属性值表示如下：
示例如下：
<!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>
输出结果：
（学习视频分享：css视频教程）
以上就是css3怎样实现取消动画效果的详细内容，更多请关注其它相关文章！
上一篇： css实现落叶动画效果
下一篇： css设置背景颜色