Як я можу мати дві анімації 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/ - грає лише одна анімація (остання заявлена).

TL; DR

За допомогою коми ви можете вказати кілька анімацій, кожна зі своїми властивостями, як зазначено у відповіді CriticalError нижче.

Приклад:

animation: rotate 1s, spin 3s;

Оригінальна відповідь

Тут є два питання:

№1

-webkit-animation:spin 2s linear infinite;
-webkit-animation:scale 4s linear infinite;

Другий рядок замінює перший. Отже, не має ефекту.

№2

Обидва ключові кадри застосовуються до однієї властивості transform

Як альтернативу, ви могли б обернути зображення в <div>анімацію і анімувати кожне окремо і з різною швидкістю.

http://jsfiddle.net/rnrlabs/x9cu53hp/

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

.spinner {
    position: relative;
    top: 150px;
    animation: spin 2s infinite linear;
}


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

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

<div class="spinner">
<img class="scaler" src="http://makeameme.org/media/templates/120/grumpy_cat.jpg" alt="" width="120" height="120">
<div>

У разі, якщо хтось новий прийде і захопить цей потік, ви можете вказати кілька анімацій - кожна зі своїми властивостями - комою.

Приклад:

animation: rotate 1s, spin 3s;

Ви дійсно можете запускати декілька анімацій одночасно, але ваш приклад має дві проблеми. По-перше, синтаксис, який ви використовуєте, вказує лише одну анімацію. Правило другого стилю приховує перше. Ви можете вказати дві анімації, використовуючи такий синтаксис:

-webkit-animation-name: spin, scale
-webkit-animation-duration: 2s, 4s

як у цій загадці (де я замінив "шкала" на "згасання" через іншу проблему, пояснену нижче ... Ведіть з собою.): http://jsfiddle.net/rwaldin/fwk5bqt6/

По-друге, обидві ваші анімації змінюють те саме властивість CSS (перетворення) того ж елемента DOM. Я не вірю, що ти можеш це зробити. Можна вказати дві анімації для різних елементів, можливо, зображення та елемента контейнера. Просто застосуйте одну з анімацій до контейнера, як у цій скрипці: http://jsfiddle.net/rwaldin/fwk5bqt6/2/

Ви не можете відтворити дві анімації, оскільки атрибут можна визначити лише один раз. Скоріше, чому ви не включите другу анімацію в першу і не відрегулюєте ключові кадри, щоб отримати правильний час?

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

@-webkit-keyframes spin-scale { 
    50%{
        transform: rotate(360deg) scale(2);
    }
    100% { 
        transform: rotate(720deg) scale(1);
    } 
}

<img class="image" src="http://makeameme.org/media/templates/120/grumpy_cat.jpg" alt="" width="120" height="120">

ви можете спробувати щось подібне

встановіть для батьків rotateі зображення scaleтак, щоб час rotateі scaleчас могли бути різними

div {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120px;
  height: 120px;
  margin: -60px 0 0 -60px;
  -webkit-animation: spin 2s linear infinite;
}
.image {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120px;
  height: 120px;
  margin: -60px 0 0 -60px;
  -webkit-animation: scale 4s linear infinite;
}
@-webkit-keyframes spin {
  100% {
    transform: rotate(180deg);
  }
}
@-webkit-keyframes scale {
  100% {
    transform: scale(2);
  }
}

<div>
  <img class="image" src="http://makeameme.org/media/templates/120/grumpy_cat.jpg" alt="" width="120" height="120" />
</div>