停止 CSS3 动画跳跃答案

【问题标题】：Stop CSS3 animation jumping停止 CSS3 动画跳跃
【发布时间】：2013-12-24 19:11:32
【问题描述】：

我有 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;
}

【问题讨论】：

标签： css svg css-animations animate.css

【解决方案1】：

确实在图片中。你的行大约 6px 高。 80不能被6整除，所以会有一点位移。然而，78 可以被 6 整除。

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

所以与其向下移动 80px，不如向下移动 78px。

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

【讨论】：