Множественный фон перехода 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; 
}