Odtwarzaj wiele animacji CSS w tym samym czasie

120

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

Don P.
źródło
Czy obraz powinien skalować się podczas obracania? Odpowiedź, którą podałem, nie brzmi, ale jeśli tego potrzebujesz, możesz ją zmodyfikować, aby to zrobić
Ram G Athreya

Odpowiedzi:

154

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>

rnrneverdies
źródło
216

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;
Błąd krytyczny
źródło
3
Dzięki, to znacznie prostsze rozwiązanie
Sergey Rotbart
12
Do diabła, tak przecinek!
Zachary Dahan
4
co z różnymi opóźnieniami animacji?
mały maleńki mężczyzna
1
@ little-tiny-man możesz również określić wielokrotność animation-delayprzez śpiączkę, zobacz odpowiedź
Klesun
35

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/

Ray Waldin
źródło
Dziękujemy za określenie, że możemy wykonać wiele animacji, ponieważ nazwy oddzielamy przecinkami.
Zachary Dahan
3

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

Ram G Athreya
źródło
2
użytkownik zapytał o „przy różnych prędkościach”
rnrneverdies
Obrót odbywa się przy różnych prędkościach w 2 sekundy, podczas gdy skala w 4 sekundy, ponieważ pisanie dwóch instrukcji animacji nie działa. Zadbałem o synchronizację za pomocą klatek kluczowych.
Ram G Athreya
Chociaż prawdą jest, że nie można jednocześnie odtwarzać dwóch animacji transformacji (ponieważ jedna transformacja nadpisałaby drugą), nie jest poprawne stwierdzenie „Nie można odtworzyć dwóch animacji, ponieważ atrybut można zdefiniować tylko raz”. Zobacz zaakceptowaną odpowiedź na temat używania wartości rozdzielanych przecinkami z animacjami.
Justin Taddei
2

możesz spróbować czegoś takiego

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

Vitorino fernandes
źródło