停止CSS3动画跳跃

我有跟随小提琴 http://jsfiddle.net/mauricederegt/rtS5U/4/（仅限 Webkit/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;
}

确实是图像中的。你的行高度约为 6 像素。 80不能被6整除，所以会有一点位移。然而78可以被6整除。

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

因此，与其向下移动 80 像素，不如向下移动 78 像素。

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