Jouer de multiples animations CSS en même temps

TL;DR

Avec une virgule, vous pouvez spécifier de multiples animations, chacune avec leurs propres propriétés.

Exemple:

animation: rotate 1s, spin 3s;

Réponse originale à cette question

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'applique sur la même propriété transform

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

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

CSS:

.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);
    }
}

HTML:

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

En effet, vous pouvez exécuter plusieurs animations en même temps, mais votre exemple a deux problèmes. Tout d'abord, la syntaxe que vous utilisez seulement spécifie une animation. La deuxième règle de style masque la première. Vous pouvez spécifier deux animations à l'aide de la syntaxe ressemble à ceci:

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

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

Deuxième, à la fois de vos animations de modifier la même propriété CSS (transformation) de la même élément du DOM. Je ne crois pas que vous pouvez le faire. Vous pouvez spécifier deux animations sur différents éléments, à l'image, et un élément de conteneur peut-être. Il suffit d'appliquer l'une des animations pour le conteneur, comme dans ce violon: http://jsfiddle.net/rwaldin/fwk5bqt6/2/

Vous ne pouvez pas jouer deux animations depuis l'attribut peut être défini qu'une seule fois. Plutôt pourquoi ne pas inclure la deuxième animation dans le premier et ajuster les images clés pour obtenir le bon timing?

CSS:

.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);
    } 
}

HTML:

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