Question

我设法在一个接一个的动画片中制作多个关键帧

但不能完成整个循环，所以目前它只播放一次序列然后完成，有没有办法使它循环而不使用jquery或javascript在n秒过后重新启动它。

.hi {
    width: 48px;
    height: 48px;
    background-image: url("http://s30.postimg.org/k4qce9z1r/warp.png");

    -webkit-animation: play1 0.3s 0s steps(5) forwards, play2 0.3s 0.3s steps(5) forwards, play3 0.3s 0.6s steps(5) forwards; }

@-webkit-keyframes play1 {    from { background-position-y:    0px; background-position-x:    0px; }
     to { background-position-y:    0px; background-position-x: -240px; } }   @-webkit-keyframes play2 {    from { background-position-y:  -48px; background-position-x:    0px; }
     to { background-position-y:  -48px; background-position-x: -240px; } } @-webkit-keyframes play3 {    from { background-position-y:  -96px; background-position-x:    0px; }
     to { background-position-y:  -96px; background-position-x: -240px; } }

Answer 1

想通了我自己必须使用短时间将动画合并到一个块中，否则在行之间可以看到背景的滚动。

<style>
.hi {
    width: 48px;
    height: 48px;
    background-image: url("warp.png");

    -webkit-animation: play1 1s 0s steps(5) infinite;
}

@-webkit-keyframes play1 {
   from { background-position-y:    0px; background-position-x:    0px; }
     33% { background-position-y:    0px; background-position-x: -240px; }
     33.0001% { background-position-y:  -48px; background-position-x:    0px; }
     66% { background-position-y:  -48px; background-position-x: -240px; }
     66.0001% { background-position-y:  -96px; background-position-x:    0px; }
     100% { background-position-y:  -96px; background-position-x: -240px; }
}    

</style>

<body>

<img src="warp.png" />
<br><br>
<div class="hi"></div>

</body>

循环具有多个关键帧的CSS3动画

1 个答案: