Определяет, какие стили должны применяться к элементу, когда анимация не проигрывается. Например, после её завершения или при остановке. По умолчанию, в момент окончания анимации стиль элемента возвращается к исходному, свойство animation-fill-mode позволяет изменить это поведение и сделать так, чтобы стиль элемента оставался как у последнего ключевого кадра.
К примеру, если вы делаете выезжающее из-за края окна браузера сообщение, то после окончания анимации сообщение вернётся обратно за край экрана. Значение forwards свойства animation-fill-mode изменяет это поведение и оставляет стили на момент завершения движения. Таким образом, сообщение плавно выдвинется из-за края окна и останется на месте.
Значения
none К элементу не применяются какие-либо стили.
forwards К элементу по окончанию анимации применяется стиль последнего ключевого кадра. Каким будет этот кадр в последовательности анимации зависит от комбинации значений свойств animation-direction и animation-iteration-count (табл. 1).
animation-direction | animation-iteration-count | Значение |
---|---|---|
normal | любое число | 100% или to |
reverse | любое число | 0% или from |
alternate | чётное число | 0% или from |
alternate | нечётное число | 100% или to |
alternate-reverse | чётное число | 100% или to |
alternate-reverse | нечётное число | 0% или from |
backwards К элементу применяется стиль первого ключевого кадра и он остаётся на протяжении периода заданного animation-delay. Первый ключевой кадр определяется на основании значения animation-direction (табл. 2).
animation-direction | Значение |
---|---|
normal или alternate | 0% или from |
reverse или alternate-reverse | 100% или to |
both К элементу применяются оба правила, как для backwards , так и для forwards .
Поддержка
Internet Explorer 10
Chrome 3
Opera 12.10
Safari 4
Firefox 16