Question

如何制作无缝动画？截至目前，它在动画的一部分中跳跃。

.poster
{
width: 178px;
height: 257px;
background-color: #212121;
background-size: 100px 100px;
background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, .05) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%, transparent 75%, transparent);
-webkit-animation: backgroundmove infinite 2s linear;
}

@-webkit-keyframes backgroundmove {
from {
    background-position: left;
}

to {
    background-position: right;
}
}

Answer 1

尝试将动画值更改为：

@-webkit-keyframes backgroundmove {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 0 100px;
    }
}

小提琴参考：http://jsfiddle.net/tehtrav/Pcn5w/1/

Answer 2

我认为这与图像的几何形状有关。动画使用一定的持续时间从右到左获取背景。这意味着最左边的像素在该时间长度（2s）内向右移动一定距离，然后从左到右重复动画。如果重复之前的那一刻在动画重新启动后没有在视觉上模仿那一刻，你会看到跳跃。

我通过修改background-size属性http://jsfiddle.net/42zYP/1/

来删除了跳转

随着您越来越多地修改background-size，您可以看到跳转变得更加明显。

Answer 3

<强> DEMO

@-webkit-keyframes backgroundmove {
    from { background-position: 0;     }
    to   { background-position: 100px; }
}

如何使这个背景图像平滑动画

3 个答案: