css - 停止 CSS3 动画跳跃

Question

我有 following fiddle (仅限 Webbit/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

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

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

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

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