多个背景过渡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

回答

相关问题