Воспроизведение нескольких CSS-анимаций одновременно ⇐ CSS

[Anonymous]

Как сделать так, чтобы две CSS-анимации воспроизводились с разной скоростью?

• Изображение должно вращаться и растет одновременно.
• Вращение будет происходить каждые 2 секунды.
• Рост будет циклическим каждые 4 секунды.

Пример кода:

Код: Выделить всё

.image {
position: absolute;
top: 50%;
left: 50%;
width: 120px;
height: 120px;
margin:-60px 0 0 -60px;
-webkit-animation:spin 2s linear infinite;
-webkit-animation:scale 4s linear infinite;
}

@-webkit-keyframes spin {
100% {
transform: rotate(180deg);
}
}

@-webkit-keyframes scale {
100% {
transform: scaleX(2) scaleY(2);
}
}

http://jsfiddle.net/Ugc5g/3388/ — воспроизводится только одна анимация (последняя объявленная).

Подробнее здесь: https://stackoverflow.com/questions/269 ... -same-time