Come posso avere due animazioni CSS che vengono riprodotte a velocità diverse ?

• L'immagine dovrebbe ruotare e crescere allo stesso tempo.
• La rotazione verrà eseguita ogni 2 secondi.
• La crescita ciclerà ogni 4 secondi.

Codice di esempio:

.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/ - viene riprodotta solo un'animazione (l'ultima dichiarata).

TL; DR

Con una virgola, puoi specificare più animazioni ciascuna con le proprie proprietà come indicato nella risposta CriticalError di seguito.

Esempio:

animation: rotate 1s, spin 3s;

Risposta originale

Ci sono due problemi qui:

1 #

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

La seconda riga sostituisce la prima. Quindi, non ha alcun effetto.

2 #

Entrambi i fotogrammi chiave si applicano alla stessa proprietà transform

In alternativa puoi avvolgere l'immagine in una <div>e animare ciascuna separatamente ea velocità diverse.

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>

Nel caso in cui qualcuno di nuovo si avvicini e catturi questo thread, puoi specificare più animazioni, ognuna con le proprie proprietà, con una virgola.

Esempio:

animation: rotate 1s, spin 3s;

Puoi effettivamente eseguire più animazioni contemporaneamente, ma il tuo esempio ha due problemi. Innanzitutto, la sintassi che utilizzi specifica solo un'animazione. La seconda regola di stile nasconde la prima. Puoi specificare due animazioni usando la sintassi come questa:

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

come in questo violino (dove ho sostituito "scala" con "dissolvenza" a causa dell'altro problema spiegato di seguito ... Abbi pazienza .): http://jsfiddle.net/rwaldin/fwk5bqt6/

In secondo luogo, entrambe le animazioni alterano la stessa proprietà CSS (trasformazione) dello stesso elemento DOM. Non credo che tu possa farlo. È possibile specificare due animazioni su elementi diversi, l'immagine e forse un elemento contenitore. Basta applicare una delle animazioni al contenitore, come in questo violino: http://jsfiddle.net/rwaldin/fwk5bqt6/2/

Non è possibile riprodurre due animazioni poiché l'attributo può essere definito solo una volta. Piuttosto, perché non includi la seconda animazione nella prima e aggiusti i fotogrammi chiave per ottenere il giusto tempismo?

.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">

puoi provare qualcosa di simile

impostare il genitore su rotatee l'immagine su in scalemodo che l' ora rotatee scalepossa essere diversa

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>