Właściwość CSS animation-fill-mode

Definicja stylu, przeznaczenie i użycie animation-fill-mode

Właściwość animation-fill-mode określa styl elementu, gdy animacja nie jest odtwarzana (przed rozpoczęciem, po zakończeniu lub jedno i drugie).

Animacje CSS nie wpływają na element przed odtworzeniem pierwszej klatki kluczowej ani po odtworzeniu ostatniej klatki kluczowej. Właściwość animation-fill-mode może przesłonić to zachowanie.

Wartości właściwości animation-fill-mode

Wartość	Opis
none	Domyślna wartość. Animacja nie zastosuje żadnych stylów do elementu przed ani po jej wykonaniu.
forwards	Element zachowa wartości stylu ustawioną przez ostatnią klatkę kluczową (w zależności od kierunku animacji i liczby iteracji animacji).
backwards	Element otrzyma wartości stylu ustawioną przez pierwszą klatkę kluczową (w zależności od kierunku animacji) i zachowa je w okresie opóźnienia animacji.
both	Animacja będzie zgodna z regułami zarówno do przodu, jak i do tyłu, rozszerzając właściwości animacji w obu kierunkach.
initial	Ustawia tę właściwość na jej wartość domyślną.
inherit	Dziedziczy tę właściwość z elementu nadrzędnego.

Składnia CSS animation-fill-mode

Wsparcie przeglądarek dla właściwości animation-fill-mode

Liczba w tabeli określa pierwszą wersję przeglądarki w pełni obsługującą tę właściwość.

Liczba przed -webkit-, -moz-, -o- określa pierwszą wersję, która działała z prefiksem.

Właściwość
animation-fill-mode	43.0 4.0 -webkit-	10.0	16.0 5.0 -moz-	9.0 4.0 -webkit-	30.0 15.0 -webkit- 12.0 -o-

Właściwość CSS animation-fill-mode

Definicja stylu, przeznaczenie i użycie animation-fill-mode

Wartości właściwości animation-fill-mode

Składnia CSS animation-fill-mode

Wsparcie przeglądarek dla właściwości animation-fill-mode

Przykładowe zastosowania właściwości animation-fill-mode

Obszar działalności – tworzenie stron internetowych w miastach: