多个背景转换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;
}