html - 多重背景过渡 CSS3

Question

我有一个具有多个(两个)背景的元素

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

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

这里，两个背景会同时移动。

我怎样才能对它们设置不同的过渡时间？

我想一个解决方案是使用@keyframes 来延迟其中一个背景动画，但我想知道是否还有其他方法。

Answer 1

这里有点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;
}