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

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 some pixels, say 200px它的工作原理to。

我试图在SO的CodeSnippet的帮助下添加一个conde-snippet。我不能。任何人都可以请这样做吗？

来源

2015-04-12 Gops AB

我没有看到循环动画与100％的背景位置。 –

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

这里是my fiddle。

来源

2015-04-12 11:30:04

我确定了它。我也编辑过这些帖子。为什么它不适用于％？请让我知道 –

@GopsAB - 我不知道。这里是背景大小和移动的小提琴：https：//jsfiddle.net/Marco_Bernardini/gna7r4L8/9/ - 问题不是％，而是100％。 –

只需将您的百分比值更改为viewport percentage lengthsvh & 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>

来源

2015-04-12 11:43:09 Kaiido

的100％A背景尺寸不能与百分比位置属性被移动（它不是直观的，我知道...）

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

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

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

来源

2015-04-12 12:13:47 vals

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

回答

相关问题