多重背景过渡CSS3

Question

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

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

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

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

我如何使它们具有不同的过渡时间？

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

- Théo Winterhalter

---

我认为你做不到。你只是在转换一个属性...虽然有两个值。 - Paulie_D

我也是这么想的，问一下也没什么损失。谢谢。 - Théo Winterhalter

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

- TimSPQR

---

好的，我知道可以用JS完成，我只是想知道CSS3是否也能实现。谢谢。 - Théo Winterhalter

这是一个更新 - http://jsfiddle.net/timspqr/UtcBP/1/. 这个 fiddle 中没有 JS - 我有时会使用 JS 框进行复制粘贴，我只是忘记删除它了。更新后的 fiddle 是全 CSS 的。 - TimSPQR

谢谢，但是没有过渡效果，例如我希望上面的背景平滑移动，而另一个则应该瞬间移动（或类似）。 - Théo Winterhalter

这里是更新，提供了你想要的部分内容 - http://jsfiddle.net/timspqr/UtcBP/2/。我已经找了很长时间，但找不到纯CSS解决方案。可能需要考虑jQuery。编辑=我想知道是否可以合并两个div并获得你想要的内容。 - TimSPQR

也许在我的电脑上会有所不同，但是转换的最后一个值（0.5秒）被应用于两个背景。我猜这意味着仅使用CSS不可能实现。（这只是为了知道，我认为没有必要讨论如何使用JS来完成它）谢谢！ - Théo Winterhalter