多个背景过渡CSS3

Question

我有一个具有多个（两个）背景的元素

div
{
    background: url("bg1.png"), url("bg2.png");
    transition: background 1s;
}
div:hover
{
    background-position: 0 -20px, 0 -200px;
}

在这里，两个背景都将同时移动。

我如何在它们上有不同的过渡时间？

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

Answer 1

这是一个可能对您有帮助的小提琴。

相关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;
}