Kurs HTML

Do czego służy animation-fill-mode?

Właściwość animation-fill-mode określa, **jakie style są stosowane do elementu, gdy animacja nie jest aktywna**, czyli przed jej rozpoczęciem (podczas opóźnienia animation-delay) oraz po jej zakończeniu (jeśli nie jest zapętlona).

Domyślnie element zachowuje swoje normalne style poza czasem trwania animacji. animation-fill-mode pozwala to zmienić, np. utrzymać style z ostatniej klatki kluczowej po zakończeniu animacji.

Składnia i wartości

Właściwość animation-fill-mode przyjmuje jedną lub więcej wartości, oddzielonych przecinkami, odpowiadających kolejnym animacjom zdefiniowanym w animation-name.

animation-fill-mode: none | forwards | backwards | both [, ...];Kopiuj

• none (wartość domyślna): Animacja nie stosuje żadnych stylów do elementu, gdy nie jest aktywna. Element ma swoje normalne style przed startem i wraca do nich po zakończeniu.
• forwards: Po zakończeniu ostatniego cyklu animacji element **zachowuje style zdefiniowane w ostatniej klatce kluczowej** (100% lub to, lub ostatniej klatce osiągniętej, jeśli animacja zakończyła się wcześniej). Kierunek (animation-direction) wpływa na to, która klatka jest uznawana za ostatnią (np. przy reverse będzie to 0%).
• backwards: Podczas opóźnienia (animation-delay) element **przyjmuje style zdefiniowane w pierwszej klatce kluczowej** (0% lub from, lub pierwszej relevantnej klatki w zależności od animation-direction). Po zakończeniu animacji element wraca do swoich normalnych stylów (chyba że użyto również forwards).
• both: Łączy efekty forwards i backwards. Element przyjmuje style z pierwszej klatki podczas opóźnienia i zachowuje style z ostatniej klatki po zakończeniu animacji.

Wartość domyślna: none.

Przykład:

@keyframes zmiana {
  from { opacity: 0; background-color: blue; }
  to { opacity: 1; background-color: red; }
}

.element {
  opacity: 0.5; /* Normalny styl */
  background-color: green; /* Normalny styl */
  animation-name: zmiana;
  animation-duration: 2s;
  animation-delay: 1s;
}

.element-none { /* Domyślnie */
  /* Przed 1s: opacity: 0.5, green */
  /* Od 1s do 3s: animacja od blue do red */
  /* Po 3s: opacity: 0.5, green */
  animation-fill-mode: none;
}

.element-forwards {
  /* Przed 1s: opacity: 0.5, green */
  /* Od 1s do 3s: animacja od blue do red */
  /* Po 3s: opacity: 1, red (styl z 'to') */
  animation-fill-mode: forwards;
}

.element-backwards {
  /* Przed 1s: opacity: 0, blue (styl z 'from') */
  /* Od 1s do 3s: animacja od blue do red */
  /* Po 3s: opacity: 0.5, green (wraca do normalnego) */
  animation-fill-mode: backwards;
}

.element-both {
  /* Przed 1s: opacity: 0, blue (styl z 'from') */
  /* Od 1s do 3s: animacja od blue do red */
  /* Po 3s: opacity: 1, red (styl z 'to') */
  animation-fill-mode: both;
}
Kopiuj

Jeśli lista trybów wypełnienia jest krótsza niż lista nazw animacji, wartości są powtarzane.

Praktyczne zastosowania

• forwards: Najczęściej używana wartość. Idealna, gdy chcemy, aby element pozostał w stanie końcowym po zakończeniu animacji (np. animacja pojawienia się elementu, który ma pozostać widoczny). Bez forwards element "wróciłby" do stanu sprzed animacji.
• backwards: Przydatne, gdy chcemy, aby element od razu przyjął stan początkowy animacji, nawet jeśli jest ona opóźniona. Zapobiega to "mignięciu" normalnego stylu elementu tuż przed startem opóźnionej animacji.
• both: Łączy zalety obu powyższych, zapewniając płynny start (bez mignięcia) i utrzymanie stanu końcowego.
• none: Używane, gdy animacja ma być tylko chwilowym efektem, a element ma zawsze wracać do swojego domyślnego stanu.