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

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>

只需删除 fiddle 中的 background-size 即可查看。为什么会影响动画？

编辑如果我将动画 中的 更改为 到一些像素，比如 200px 它会起作用。

我试图在 SO 的 CodeSnippet 的帮助下添加一个 conde-snippet。我做不到。有人愿意这样做吗？

Answer 1

无法使用百分比位置属性移动 100% 的背景大小(这不直观，我知道......)

Background-position in percentage 设置背景百分比和容器尺寸百分比匹配的点..

如果大小为 100%，您选择的任何点都会给出最终位置

但是跟动画无关，跟定位本身有关