Wie kann ich zwei CSS-Animationen mit unterschiedlicher Geschwindigkeit abspielen lassen ?

• Das Bild sollte sich gleichzeitig drehen und wachsen.
• Die Drehung erfolgt alle 2 Sekunden.
• Das Wachstum erfolgt alle 4 Sekunden.

Beispielcode:

.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/ - Es wird nur eine Animation (die zuletzt deklarierte) abgespielt.

TL; DR

Mit einem Komma können Sie mehrere Animationen mit jeweils eigenen Eigenschaften angeben, wie in der Antwort von CriticalError unten angegeben.

Beispiel:

animation: rotate 1s, spin 3s;

Ursprüngliche Antwort

Hier gibt es zwei Probleme:

# 1

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

Die zweite Zeile ersetzt die erste. Hat also keine Wirkung.

# 2

Beide Keyframes gelten für dieselbe Eigenschaft transform

Alternativ können Sie das Bild in ein Bild einwickeln <div>und jedes einzeln und mit unterschiedlicher Geschwindigkeit animieren .

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>

Falls jemand Neues kommt und diesen Thread abfängt, können Sie mehrere Animationen - jede mit ihren eigenen Eigenschaften - mit einem Komma angeben.

Beispiel:

animation: rotate 1s, spin 3s;

Sie können zwar mehrere Animationen gleichzeitig ausführen, Ihr Beispiel weist jedoch zwei Probleme auf. Erstens gibt die von Ihnen verwendete Syntax nur eine Animation an. Die zweite Stilregel verbirgt die erste. Sie können zwei Animationen mit folgender Syntax angeben:

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

wie in dieser Geige (wo ich "scale" durch "fade" aufgrund des anderen unten erläuterten Problems ersetzt habe ... Bear with me.): http://jsfiddle.net/rwaldin/fwk5bqt6/

Zweitens ändern beide Animationen dieselbe CSS-Eigenschaft (Transformation) desselben DOM-Elements. Ich glaube nicht, dass du das kannst. Sie können zwei Animationen für verschiedene Elemente angeben, das Bild und möglicherweise ein Containerelement. Wenden Sie einfach eine der Animationen auf den Container an, wie in dieser Geige: http://jsfiddle.net/rwaldin/fwk5bqt6/2/

Sie können nicht zwei Animationen abspielen, da das Attribut nur einmal definiert werden kann. Warum fügen Sie nicht die zweite Animation in die erste ein und passen die Keyframes an, um das richtige Timing zu erzielen?

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

Sie können so etwas versuchen

stellen Sie die Eltern rotateund das Bild scaleso , dass die rotateund scaleZeit unterschiedlich sein können

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>