animation-fill-mode
Decyduje, jak element wygląda przed rozpoczęciem i po zakończeniu animacji.
- Wartość domyślna
none- Dziedziczona
- Nie
- Animowalna
- nie
- Dotyczy
- wszystkie elementy oraz pseudoelementy ::before i ::after
- JavaScript
element.style.animationFillMode = "forwards"
Przykład
#.card {
animation: fade-up 0.6s ease-out 0.3s both;
}
@keyframes fade-up {
from { opacity: 0; transform: translateY(12px); }
}<style>@keyframes fade-up2 { from { opacity: 0; transform: translateY(12px); } }</style>
<div class="box" style="animation: fade-up2 .6s ease-out .3s both;">Karta wchodzi płynnie</div>Definicja i zastosowanie
#Domyślnie animacja wpływa na element tylko w czasie trwania. Przed startem (w czasie opóźnienia) i po zakończeniu element wraca do swoich zwykłych stylów. Właściwość animation-fill-mode pozwala to zmienić.
forwards zatrzymuje element w stanie ostatniej klatki, backwards stosuje pierwszą klatkę już w czasie opóźnienia, a both łączy oba zachowania.
Przy efektach wejścia z opóźnieniem both to zwykle najlepszy wybór: element nie mignie przed startem i nie wróci do stanu początkowego po zakończeniu.
Składnia
#animation-fill-mode: none | forwards | backwards | both;Wartości
#Wartości w praktyce
#none
.demo { animation-fill-mode: none; }forwards
.demo { animation-fill-mode: forwards; }backwards
.demo { animation-fill-mode: backwards; }both
.demo { animation-fill-mode: both; }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
#- Efekty wejścia z opóźnieniem ustawiaj z
both, inaczej element mignie w stanie końcowym przed startem. - Zamiast
forwardsna stałe rozważ ustawienie docelowych stylów w zwykłej regule. Łatwiej je potem nadpisać.
Powiązane hasła
#Widzisz błąd albo brakuje przykładu? Napisz do nas.