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).
css
css-animations
Don P.
źródło
źródło
Odpowiedzi:
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:
Oryginalna odpowiedź
Są tu dwa problemy:
# 1
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/
źródło
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:
źródło
animation-delay
przez śpiączkę, zobacz odpowiedź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:
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/
źródło
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?
źródło
możesz spróbować czegoś takiego
ustaw rodzica
rotate
i obraz na,scale
aby czasrotate
iscale
czas były różnePokaż fragment kodu
źródło