Question

Demo

.move
{
     background-image: url("http://placehold.it/100x100");
     width: 100%;
     height: 300px;
     background-repeat: no-repeat;
     background-size: 100% 100%;
     animation: move 1s linear infinite;
}

@keyframes move
{
    from{background-position: 0, 0}
    to{background-position:200%,200%}
}
@-webkit-keyframes move
{
    from{background-position: 0, 0}
    to{background-position:200%,200%}
}

<div class="move"> </div>

只需移除小提琴中的background-size即可。为什么它会影响动画？

修改如果我在动画to中更改了to some pixels, say 200px，那就可以了。

我尝试在SO的CodeSnippet的帮助下添加一个conde-snippet。我不能。有人会这样做吗？

Answer 1

100％的背景尺寸无法使用百分比位置属性移动（我知道这不直观）

百分比背景位置设置背景百分比和容器尺寸百分比匹配的点。

如果尺寸为100％，您选择的任何点都会给出最终位置

但它与动画无关，它与定位本身有关

Answer 2

您的问题是background-size：尝试将其设置为100px, 100px，您就会看到动画。

这是my fiddle。

Answer 3

只需将您的百分比值更改为viewport percentage lengths vh＆amp; vw。

.move
{
     background-image: url("http://placehold.it/100x100");
     width: 100%;
     height: 300px;
     background-repeat: no-repeat;
     background-size: 100vw 100vh;
     animation: move 1s linear infinite;
}

@keyframes move
{
    from{background-position: 0 0}
    to{background-position: 200vw 200vh}
}
@-webkit-keyframes move
{
    from{background-position: 0 0}
    to{background-position:200vw 200vh}
}

<div class="move"> </div>

图像上的背景位置是否会停止动画？

3 个答案: