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

Описание

Указывает, как нужно применять стили к объекту анимации до и после ее выполнения.

Синтаксис

animation-fill-mode: none | forwards | backwards | both;

Значение	Описание
none	К элементу не применяются какие-либо стили. Используется по умолчанию.
forwards	К элементу по завершении анимации применяется стиль последнего ключевого кадра. Каким будет этот кадр в последовательности анимации зависит от комбинации значений свойств animation-direction и animation-iteration-count. См. таблицу 1.
backwards	К элементу применяется стиль первого ключевого кадра и он остаётся на протяжении периода заданного animation-delay. Первый ключевой кадр определяется на основании значения animation-direction. См таблицу 2.
both	К элементу применяются оба правила, как для forwards, так и для backwards.

Таблица 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

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

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

Пример

<!DOCTYPE html>
<html lang='ru'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
</head>
<body>
<style> 
#anima{ 
width: 105px; 
height: 105px; 
border-radius: 5px; 
background-color: lightgreen; 
border: 3px dotted black; 
animation: rotate-name 3s 1s; 
animation-fill-mode: both; 
} 
@keyframes rotate-name{ 
from { 
transform: translateX(0) rotate(0);
} 
to { 
transform: translateX(200px) rotate(2turn); 
} 
} 
</style> 
<div id='anima'></div>
</body>
</html>

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

Описание

Синтаксис

Пример

Читайте также

Стиль для переключателей в неопределённом состоянии

Стиль элементов форм

Свойство grid-auto-columns

Свойство clear

Свойство border