Question

我有following fiddle（仅限Wekbit / Chrome）。

只需观看动画一段时间，你会看到它“停止”一毫秒然后再继续。可能是svg文件本身吗？如果是这种情况，我该如何修复此文件，以便打嗝消失？

HTML

<div class="tile10"></div>

CSS

@-webkit-keyframes move {
    0% {
        background-position: 6px 0;  
    }
    100% {
        background-position: 6px 80px;  
    }
}


.tile10 {
    width: 80px;
    height: 80px;
    position: absolute;
    background: url(http://www.mauricederegt.nl/loopband.svg);
    background-repeat: repeat-y;
    -webkit-animation: move 3s linear infinite;   
    z-index: -1;
}

Answer 1

确实在图像中。你的行高约6px。 80不能被6分割，所以会有一点位移。但是可以通过6来分割。

http://jsfiddle.net/rtS5U/5/

所以不要将它向下移动80px，而是向下移动78px。

@-webkit-keyframes move {
    0% {
        background-position: 6px 0;  
    }
    100% {
        background-position: 6px 78px;  
    }
}

停止CSS3动画跳跃

1 个答案: