Właściwość CSSAnimacje
animation-direction
Ustala kierunek odtwarzania animacji: do przodu, wstecz albo na przemian.
- Wartość domyślna
normal- Dziedziczona
- Nie
- Animowalna
- nie
- Dotyczy
- wszystkie elementy oraz pseudoelementy ::before i ::after
- JavaScript
element.style.animationDirection = "alternate"
Przykład
#CSS
.float {
animation: float 3s ease-in-out infinite alternate;
}
@keyframes float {
to { translate: 0 -8px; }
}HTML przykładu
<style>@keyframes float-y { to { translate: 0 -8px; } }</style>
<div class="box" style="width: 120px; animation: float-y 3s ease-in-out infinite alternate;">Unoszę się</div>Podgląd
Definicja i zastosowanie
#Właściwość animation-direction decyduje, czy animacja biegnie od from do to (normal), od końca do początku (reverse), czy na zmianę w obie strony (alternate).
Przy zapętlonej animacji z normal po ostatniej klatce element przeskakuje do pierwszej, co bywa widoczne jako szarpnięcie. alternate sprawia, że wraca płynnie tą samą drogą.
alternate-reverse działa jak alternate, ale zaczyna od przebiegu wstecz.
Składnia
#Składnia
animation-direction: normal | reverse | alternate | alternate-reverse;Wartości
#- Od lewej do prawej, potem skok na początek.
- Od prawej do lewej, potem skok.
- Płynnie tam i z powrotem.
- Tam i z powrotem, zaczynając od końca.
Wartości w praktyce
#normal
Od lewej do prawej, potem skok na początek.
.demo { animation-direction: normal; }reverse
Od prawej do lewej, potem skok.
.demo { animation-direction: reverse; }alternate
Płynnie tam i z powrotem.
.demo { animation-direction: alternate; }alternate-reverse
Tam i z powrotem, zaczynając od końca.
.demo { animation-direction: alternate-reverse; }Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Do spokojnych, zapętlonych ruchów (unoszenie, oddychanie) prawie zawsze pasuje
alternate. - W skrócie
animationkierunek możesz dopisać po liczbie powtórzeń:… infinite alternate.
Powiązane hasła
#Widzisz błąd albo brakuje przykładu? Napisz do nas.