实现CSS动画（animation）的无限播放和暂停

Yiiven

发布于 2022-12-15 14:47:27

8350

发布于 2022-12-15 14:47:27

文章被收录于专栏：怡文菌怡文菌

用纯粹的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写出可以控制播放的动画啦