Comment puis-je faire jouer deux animations CSS à des vitesses différentes ?

• L'image doit tourner et grandir en même temps.
• La rotation effectuera un cycle toutes les 2 secondes.
• La croissance fera un cycle toutes les 4 secondes.

Exemple de code:

.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/ - une seule animation (la dernière déclarée) est lue.

TL; DR

Avec une virgule, vous pouvez spécifier plusieurs animations, chacune avec ses propres propriétés, comme indiqué dans la réponse CriticalError ci-dessous.

Exemple:

animation: rotate 1s, spin 3s;

Réponse originale

Il y a deux problèmes ici:

#1

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

La deuxième ligne remplace la première. Donc, n'a aucun effet.

# 2

Les deux images clés s'appliquent à la même propriété transform

Comme alternative, vous pouvez envelopper l'image dans un <div>et animer chacun séparément et à des vitesses différentes.

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>

Au cas où quelqu'un de nouveau viendrait et attraperait ce fil, vous pouvez spécifier plusieurs animations - chacune avec leurs propres propriétés - avec une virgule.

Exemple:

animation: rotate 1s, spin 3s;

Vous pouvez en effet exécuter plusieurs animations simultanément, mais votre exemple présente deux problèmes. Tout d'abord, la syntaxe que vous utilisez ne spécifie qu'une seule animation. La deuxième règle de style masque la première. Vous pouvez spécifier deux animations en utilisant une syntaxe comme celle-ci:

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

comme dans ce violon (où j'ai remplacé "scale" par "fade" en raison de l'autre problème expliqué ci-dessous ... Continuez avec moi.): http://jsfiddle.net/rwaldin/fwk5bqt6/

Deuxièmement, vos deux animations modifient la même propriété CSS (transformation) du même élément DOM. Je ne crois pas que vous puissiez faire ça. Vous pouvez spécifier deux animations sur des éléments différents, l'image et un élément conteneur peut-être. Appliquez simplement l'une des animations au conteneur, comme dans ce violon: http://jsfiddle.net/rwaldin/fwk5bqt6/2/

Vous ne pouvez pas lire deux animations car l'attribut ne peut être défini qu'une seule fois. Au contraire, pourquoi ne pas inclure la deuxième animation dans la première et ajuster les images clés pour obtenir le bon timing?

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

tu peux essayer quelque chose comme ça

définir le parent sur rotateet l'image sur scaleafin que l' heure rotateet scalepuisse être différentes

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>