animation-fill-mode¶
Свойство animation-fill-mode
определяет, какие стили должны применяться к элементу, когда анимация не проигрывается.
Например, после её завершения или при остановке. По умолчанию, в момент окончания анимации стиль элемента возвращается к исходному, свойство animation-fill-mode
позволяет изменить это поведение и сделать так, чтобы стиль элемента оставался как у последнего ключевого кадра.
К примеру, если вы делаете выезжающее из-за края окна браузера сообщение, то после окончания анимации сообщение вернётся обратно за край экрана. Значение forwards
свойства animation-fill-mode
изменяет это поведение и оставляет стили на момент завершения движения. Таким образом, сообщение плавно выдвинется из-за края окна и останется на месте.
Переходы и Анимации
Синтаксис¶
/* 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).
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
- К элементу применяются оба правила, как для
forwards
, так и дляbackwards
.
Значение по-умолчанию:
animation-fill-mode: none;
Применяется ко всем элементам, к псевдоэлементам ::before
и ::after
Спецификации¶
Поддержка браузерами¶
Описание и примеры¶
<!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
.