多個背景過渡CSS3

我有多個的元件（2）背景多個背景過渡CSS3

div 
{ 
    background: url("bg1.png"), url("bg2.png"); 
    transition: background 1s; 
} 

div:hover 
{ 
    background-position: 0 -20px, 0 -200px; 
}

在這裏，兩個背景將在同時移動。

我怎麼能有不同的轉換時間？

我想一種解決方案是使用@keyframes延遲背景動畫之一，但我想知道是否有其他方法。

來源

2014-01-29 Théo Winterhalter

我不認爲你可以。你只是轉換一個屬性......儘管有兩個值。 –

我這麼認爲，沒有傷害問。謝謝。 –

這裏有一點FIDDLE可能會幫助你。

相關CSS：

.testdiv { 
    width: 200px; 
    height: 300px; 
    background-color: red; 
    background: url("http://upload.wikimedia.org/wikipedia/commons/9/95/Tux-small.png"), 
       url("http://www.twitip.com/wp-content/uploads/2008/11/twitter-button-small.png"); 
    background-repeat: repeat-x, repeat; 
} 
.testdiv:hover { 
    background-position: 0 -20px, 0 -200px; 
}

來源

2014-01-29 16:51:15 TimSPQR

好吧，我知道它可以用JS完成，我只想知道CSS3是否可行。謝謝。 –

這是一個更新 - http://jsfiddle.net/timspqr/UtcBP/1/。小提琴中沒有JS - 我有時使用JS盒進行復制粘貼，但我忘記了將其刪除。更新的小提琴是所有CSS – TimSPQR

謝謝，但沒有過渡，我會例如像上層背景光滑，而另一個應該立即（或這樣）移動。 –

多個背景過渡CSS3

回答

相關問題