实现CSS动画（animation）的无限播放和暂停
2023-02-18 16:29:28 时间
用纯粹的CSS怎么实现动画无限播放，当播放后又如何让他暂停呢，以旋转（rotating）为例:
HTML部分（嗯，可以说非常的简洁）
<div class="icon-close"></div>CSS部分
/*旋转动画*/
@keyframes rotating {
0% {
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
}
25% {
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
}
50% {
transform: rotate(180deg);
-webkit-transform: rotate(180deg);
}
75% {
transform: rotate(270deg);
-webkit-transform: rotate(270deg);
}
100% {
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
}
}
/*HTML样式 - 一个关闭按钮*/
.icon-close{
width: 20px;
height: 20px;
line-height: 20px;
animation: rotating .5s linear infinite;/*让按钮转起来*/
}
.icon-close:hover{
animation-play-state: paused !important;/*让按钮停下来*/
}
.icon-close:after{
content:"×";
}借助Javascript我们还可以让动画永远停下来，掌握这个技能我们就可以用CSS写出可以控制播放的动画啦
本文采用 「CC BY-NC-SA 4.0」创作共享协议，转载请标注以下信息： 原文出处：Yiiven https://www.yiiven.cn/css-animation-running-and-pause.html