圖像上的背景位置是否停止動畫？

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

圖像上的背景位置是否停止動畫？

回答

相關問題