javascript - 使用javascript制作 Sprite 动画(每5秒)

Question

我想使用 js 让我的动画每 5 秒运行一次

这是我的html代码

<div id="aa"></div>

这是我的CSS代码

    #aa{
    width: 167px;
    height: 169px;
    background-image: url("sprite.png");
    /*animation: play .2s steps(6) ;*/
}
@keyframes play {
   from { background-position:    0px; }
     to { background-position: -1002px; }
}

jsfiddle

Answer 1

您可以在类中播放动画，然后每 5 秒添加和删除元素的类。

setInterval(function(){
    $("div").addClass("play");
    
    setTimeout(function(){
        $("div").removeClass("play");
    }, 1000);
}, 5000);

div {
    width: 100px;
    height: 100px;
    background: green;
}

.play {
    animation: play 1s;
}

@keyframes play {
    0% { margin-left: 0px; }
    50% { margin-left: 200px; }
    100% { margin-left: 0px; }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>