¿Cómo puedo hacer que dos animaciones CSS se reproduzcan a diferentes velocidades ?

• La imagen debe girar y crecer al mismo tiempo.
• La rotación tendrá un ciclo cada 2 segundos.
• El crecimiento tendrá un ciclo cada 4 segundos.

Código de ejemplo:

.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/ : solo se reproduce una animación (la última declarada).

TL; DR

Con una coma, puede especificar varias animaciones, cada una con sus propias propiedades, como se indica en la respuesta CriticalError a continuación.

Ejemplo:

animation: rotate 1s, spin 3s;

Respuesta original

Hay dos problemas aquí:

# 1

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

La segunda línea reemplaza a la primera. Entonces, no tiene ningún efecto.

# 2

Ambos fotogramas clave se aplican a la misma propiedad transform

Como alternativa, puede envolver la imagen en a <div>y animar cada una por separado y a diferentes velocidades.

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>

En caso de que llegue alguien nuevo y capte este hilo, puede especificar varias animaciones, cada una con sus propias propiedades, con una coma.

Ejemplo:

animation: rotate 1s, spin 3s;

De hecho, puede ejecutar varias animaciones simultáneamente, pero su ejemplo tiene dos problemas. Primero, la sintaxis que usa solo especifica una animación. La segunda regla de estilo oculta la primera. Puede especificar dos animaciones usando una sintaxis como esta:

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

como en este violín (donde reemplacé "escala" con "desvanecimiento" debido al otro problema que se explica a continuación ... Tengan paciencia conmigo): http://jsfiddle.net/rwaldin/fwk5bqt6/

En segundo lugar, ambas animaciones alteran la misma propiedad CSS (transformación) del mismo elemento DOM. No creo que puedas hacer eso. Puede especificar dos animaciones en diferentes elementos, quizás la imagen y un elemento contenedor. Simplemente aplique una de las animaciones al contenedor, como en este violín: http://jsfiddle.net/rwaldin/fwk5bqt6/2/

No puede reproducir dos animaciones ya que el atributo solo se puede definir una vez. Más bien, ¿por qué no incluye la segunda animación en la primera y ajusta los fotogramas clave para obtener la sincronización correcta?

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

puedes probar algo como esto

establezca el padre en rotatey la imagen en scalepara que el rotatey el scaletiempo puedan ser diferentes

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>