Multiple background transition CSS3

Question

I have an element with multiple (two) backgrounds

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

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

Here, both backgrounds will move in the same time.

How can I have different transition time on them ?

I guess one solution would be to use @keyframes to delay one of the backgrounds animation but I wondered if there was any other way.

Answer 1

Here's a little FIDDLE that might help you.

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