Что такое animation-fill-mode?

Question

Accepted Answer

## Стили вне активного проигрывания

По умолчанию до/после анимации элемент в своих обычных стилях. `animation-fill-mode` говорит, **какие ключевые кадры удерживать** вне активного проигрывания.

```css
.toast {
  animation: in 200ms ease-out forwards;
}
/* none | forwards | backwards | both */
```

- **`forwards`** — оставить стили последнего ключа после окончания.
- **`backwards`** — применить первый ключ уже во время `delay`.
- **`both`** — комбинация.
- **`none`** — default.

Без `forwards` элемент может «прыгнуть» назад после fade-in. Не злоупотребляйте: конечное состояние иногда лучше финальным классом в JS.

## Итог

Fill-mode контролирует стили до старта и после конца анимации; чаще всего нужен `forwards`/`both`.