# Свойство animation-fill-mode

Свойство `animation-fill-mode` устанавливает в каком положении останавливаться анимации после окончания. По умолчанию анимация возвращается в первоначальное значение и это может выглядеть не очень красиво.

## Синтаксис

`селектор { animation-fill-mode: backwards | forwards | both | none; }`

## Значения

Значение | Описание
--- | ---
`none` | Если установлена задержка анимации - то в течении времени задержки элемент будет оставаться на месте, а потом скачком перейдет к `0%` кадру. После окончания анимации элемент не останется в том состоянии, где остановился, а перепрыгнет в начальное состояние.
`backwards` | Заставляет элемент двигаться после загрузки страницы к `0%` кадру, даже если установлена задержка `animation-delay`, и оставаться там, пока не начнется анимация. После окончания анимации элемент не останется в том состоянии, где остановился, а перепрыгнет в начальное состояние.
`forwards` | Указывает браузеру, что после окончания анимации элемент останется в том состоянии, где остановился.
`both` | Включает в себя backwards и forwards - после загрузки страницы элемент установится к `0%` кадру, а после окончания анимации элемент останется там, где остановился.

Значение по умолчанию: `none`.

## Пример . Значение none

В данном примере `margin-left` установлен в значение `300px` для элемента, а для первого кадра анимации - в `0px`. Так как нет задержки `animation-delay`, то элемент после загрузки страницы станет в `0px`, а не в `300px`. Кроме того, анимация после окончания будет перепрыгивать в начальное значение:

`<div id="elem"></div>` `@keyframes move { from { margin-left: 0; } to { margin-left: 400px; } } #elem { margin-left: 300px; animation-fill-mode: none; animation-delay: 0s; animation-duration: 3s; animation-name: move; animation-iteration-count: infinite; animation-timing-function: linear; border: 1px solid black; width: 50px; height: 50px; }`

:

## Пример . Значение none

В данном примере `margin-left` установлен в значение `300px` для элемента, а для первого кадра анимации - в `0px`. Также для элемента установлена задержка `animation-delay` в `3` секунды, поэтому элемент после загрузки страницы станет в `300px`, а не в `0px`, и будет стоять там `3` секунды после начала анимации а потом скачком перейдет к `0px` - и анимация начнется оттуда. Кроме того,анимация после окончания будет перепрыгивать в начальное значение:

`<div id="elem"></div>` `@keyframes move { from { margin-left: 0; } to { margin-left: 400px; } } #elem { margin-left: 300px; animation-fill-mode: none; animation-delay: 0s; animation-duration: 3s; animation-name: move; animation-iteration-count: infinite; animation-timing-function: linear; border: 1px solid black; width: 50px; height: 50px; }`

:

## Пример . Значение backwards

В данном примере `margin-left` установлен в значение `300px` для элемента, а для первого кадра анимации - в `0px`. Также для элемента установлен `animation-fill-mode` в значении `backwards`, поэтому элемент после загрузки страницы станет в `0px`, а не в `300px`, как это было для `animation-fill-mode` в значении `none`. Кроме того,анимация после окончания будет перепрыгивать в начальное значение:

`<div id="elem"></div>` `@keyframes move { from { margin-left: 0; } to { margin-left: 400px; } } #elem { margin-left: 300px; animation-fill-mode: backwards; animation-delay: 0s; animation-duration: 3s; animation-name: move; animation-iteration-count: infinite; animation-timing-function: linear; border: 1px solid black; width: 50px; height: 50px; }`

:

## Пример . Значение none и количество повторений равно 1

В данном примере `margin-left` установлен в значение `300px` для элемента, а для первого кадра анимации - в `0px`. Также для элемента установлена задержка `animation-delay` в `3` секунды, поэтому элемент после загрузки страницы станет в `300px`, а не в `0px`, и будет стоять там `3` секунды после начала анимации а потом скачком перейдет к `0px` - и анимация начнется оттуда. Так как `animation-fill-mode` установлен в значении none, то после проигрывания анимации элемент вернется в начальное значение:

`<div id="elem"></div>` `@keyframes move { from { margin-left: 0; } to { margin-left: 400px; } } #elem { margin-left: 300px; animation-fill-mode: none; animation-delay: 3s; animation-duration: 3s; animation-name: move; animation-iteration-count: 1; animation-timing-function: linear; border: 1px solid black; width: 50px; height: 50px; }`

:

## Пример . Значение forwards и количество повторений равно 1

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

Кроме того, `margin-left` установлен в значение `300px` для элемента, а для первого кадра анимации - в `0px`. Также для элемента установлена задержка `animation-delay` в `3` секунды, поэтому элемент после загрузки страницы станет в `300px`, а не в `0px`, и будет стоять там `3` секунды после начала анимации, а потом скачком перейдет к `0px` - и анимация начнется оттуда:

`<div id="elem"></div>` `@keyframes move { from { margin-left: 0; } to { margin-left: 400px; } } #elem { margin-left: 300px; animation-fill-mode: forwards; animation-delay: 3s; animation-duration: 3s; animation-name: move; animation-iteration-count: 1; animation-timing-function: linear; border: 1px solid black; width: 50px; height: 50px; }`

:

## Пример . Значение both и количество повторений равно 1

В данном примере `animation-fill-mode` установлен в значении `both`, а число повторений анимации - в `1`. После загрузки страницы элемент будет стоять в первом кадре анимации (в `0px`, а не в `300px`), а после проигрывания анимации элемент останется в том положении, где закончилась анимация, а не прыгнет в исходную точку:

`<div id="elem"></div>` `@keyframes move { from { margin-left: 0; } to { margin-left: 400px; } } #elem { margin-left: 300px; animation-fill-mode: both; animation-delay: 3s; animation-duration: 3s; animation-name: move; animation-iteration-count: 1; animation-timing-function: linear; border: 1px solid black; width: 50px; height: 50px; }`

:

## Смотрите также

- свойство `animation-name`,
  которое задает имя анимации
- свойство `animation-duration`,
  которое задает продолжительность анимации
- свойство `animation-delay`,
  которое задает задержку перед выполнением анимации
- свойство `animation-timing-function`,
  которое задает скорость выполнения анимации
- свойство `animation-iteration-count`,
  которое задает количество итераций анимации
- свойство `animation-direction`,
  которое задает направление анимации
- свойство `animation-play-state`,
  которое позволяет поставить анимацию на паузу
- свойство `animation`,
  представляющее собой сокращение для анимаций
- команду `@keyframes`,
  задающую ключевые кадры анимации
- плавные переходы `transition`, представляющие собой анимацию по наведению на элемент

← →
↑
en ru