【问题标题】: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;  
        }
    }
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2012-12-02
      • 1970-01-01
      • 2013-04-15
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2011-12-03
      相关资源
      最近更新 更多