Перейти к содержанию

animation-fill-mode

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

Например, после её завершения или при остановке. По умолчанию, в момент окончания анимации стиль элемента возвращается к исходному, свойство animation-fill-mode позволяет изменить это поведение и сделать так, чтобы стиль элемента оставался как у последнего ключевого кадра.

К примеру, если вы делаете выезжающее из-за края окна браузера сообщение, то после окончания анимации сообщение вернётся обратно за край экрана. Значение forwards свойства animation-fill-mode изменяет это поведение и оставляет стили на момент завершения движения. Таким образом, сообщение плавно выдвинется из-за края окна и останется на месте.

Демо

Переходы и Анимации

Синтаксис

1
2
3
4
5
6
7
8
9
/* Single animation */
animation-fill-mode: none;
animation-fill-mode: forwards;
animation-fill-mode: backwards;
animation-fill-mode: both;

/* Multiple animations */
animation-fill-mode: none, backwards;
animation-fill-mode: both, forwards, none;

Значения

none

К элементу не применяются какие-либо стили.

forwards

К элементу по окончанию анимации применяется стиль последнего ключевого кадра. Каким будет этот кадр в последовательности анимации зависит от комбинации значений свойств animation-direction и animation-iteration-count (табл. 1).

Табл. 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).

Табл. 2. Первый ключевой кадр

animation-direction Значение
normal или alternate 0% или from
reverse или alternate-reverse 100% или to
both

К элементу применяются оба правила, как для forwards, так и для backwards.

Значение по-умолчанию:

1
animation-fill-mode: none;

Применяется ко всем элементам, к псевдоэлементам ::before и ::after

Спецификации

Поддержка браузерами

Описание и примеры

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>animation-fill-mode</title>
        <style>
            .wheel {
                animation: wheel 3s 1s;
                animation-fill-mode: both;
                -webkit-animation: wheel 3s 1s;
                -webkit-animation-fill-mode: both;
            }
            @keyframes wheel {
                from {
                    transform: translateX(0) rotate(0);
                }
                to {
                    transform: translateX(450px) rotate(
                            2turn
                        );
                }
            }
            @-webkit-keyframes wheel {
                from {
                    transform: translateX(0) rotate(0);
                }
                to {
                    transform: translateX(450px) rotate(
                            2turn
                        );
                }
            }
        </style>
    </head>
    <body>
        <img src="image/wheel.png" alt="" class="wheel" />
    </body>
</html>

В данном примере показано изображение ожидает одну секунду, затем начинает вращаться и двигаться вправо. По окончанию анимации колесо остаётся в крайнем правом положении.

Примечание

  • Chrome, Safari и Android поддерживают свойство -webkit-animation-fill-mode.
  • Opera до версии 12.10 поддерживает свойство -o-animation-fill-mode.
  • Firefox до версии 16 поддерживает свойство -moz-animation-fill-mode.

Комментарии