Jak mogę mieć dwie animacje CSS odtwarzane z różnymi prędkościami ?

• Obraz powinien obracać się i rosnąć w tym samym czasie.
• Rotacja będzie się zmieniać co 2 sekundy.
• Wzrost będzie cykliczny co 4 sekundy.

Przykładowy kod:

.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/ - odtwarzana jest tylko jedna animacja (ostatnia zadeklarowana).

TL; DR

Przecinkiem można określić wiele animacji, z których każda ma własne właściwości, zgodnie z poniższą odpowiedzią CriticalError.

Przykład:

animation: rotate 1s, spin 3s;

Oryginalna odpowiedź

Są tu dwa problemy:

# 1

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

Druga linia zastępuje pierwszą. Więc nie ma żadnego efektu.

# 2

Obie klatki kluczowe dotyczą tej samej właściwości transform

Alternatywnie możesz owinąć obraz w a <div>i animować każdy z nich osobno iz różnymi prędkościami.

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>

W przypadku, gdy ktoś nowy przychodzi i łapie ten wątek, możesz określić wiele animacji - każda z własnymi właściwościami - za pomocą przecinka.

Przykład:

animation: rotate 1s, spin 3s;

Rzeczywiście możesz uruchomić wiele animacji jednocześnie, ale Twój przykład ma dwa problemy. Po pierwsze, używana składnia określa tylko jedną animację. Druga reguła stylu ukrywa pierwszą. Możesz określić dwie animacje, używając takiej składni:

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

jak na tych skrzypcach (gdzie zamieniłem „skalę” na „zanikanie” z powodu innego problemu opisanego poniżej ... Poproś o mnie.): http://jsfiddle.net/rwaldin/fwk5bqt6/

Po drugie, obie Twoje animacje zmieniają tę samą właściwość CSS (transformację) tego samego elementu DOM. Nie wierzę, że możesz to zrobić. Możesz określić dwie animacje na różnych elementach, być może na obrazie i elemencie kontenera. Po prostu zastosuj jedną z animacji do kontenera, jak na tym skrzypcach: http://jsfiddle.net/rwaldin/fwk5bqt6/2/

Nie możesz odtworzyć dwóch animacji, ponieważ atrybut można zdefiniować tylko raz. Dlaczego raczej nie włączysz drugiej animacji do pierwszej i nie dostosujesz klatek kluczowych, aby uzyskać właściwy czas?

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

możesz spróbować czegoś takiego

ustaw rodzica rotatei obraz na, scaleaby czas rotatei scaleczas były różne

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>