Свойство 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>

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

Функция radial-gradient()

Функция добавляет радиальный градиент к фону элемента. Радиальные по своему принципу похожи на ли...

Стиль input / textarea, отображающего в данный момент подсказки

Определяет стиль элемента input или textarea, который в данный момент отображает текст подсказки,...

Свойство left

Для позиционированного элемента определяет расстояние от левого края родительского элемента, не в...

Свойство align-content

Указывает, как выравниваться строкам внутри флекс - контейнера по поперечной оси при условии, что...

Свойство transition-delay

Свойство transition-delay устанавливает время ожидания перед запуском эффекта перехода. Значение ...