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

用纯粹的CSS怎么实现动画无限播放，当播放后又如何让他暂停呢，以旋转（rotating）为例:

HTML部分（嗯，可以说非常的简洁）

代码语言：javascript复制

<div class="icon-close"></div>

CSS部分

代码语言：javascript复制

/*旋转动画*/
@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://cloud.tencent.com/developer/article/2193223

css html

0 人点赞