停止CSS3动画跳跃

本文介绍了停止CSS3动画跳跃的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有（仅限Wekbit / Chrome）。

I have the following fiddle (Wekbit/Chrome only).

只需观看动画一段时间，你会看到它停止一毫秒，然后再继续。文件本身是否是 svg ？如果是这样，我如何修复此文件以使打嗝消失？

Just watch the animation for a while and you will see it "stop" for a millisecond and then continues again. Could it be the svg file itself? If that is the case, how can I fix this file so the hiccup is gone?

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

推荐答案

。你的行大约是6px高。 80不能被6分割，所以会有一点位移。 78但可由6除尽。

It was indeed in the image. Your rows are about 6px heigh. 80 is not dividable by 6, so there will be a little displacement. 78 however is dividable by 6.

因此，请将其向下移动80像素，向下移动78像素。

So instead of moving it 80px down, move it 78px down.

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

这篇关于停止CSS3动画跳跃的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！