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

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

Свойство text-decoration-line

Определяет, как должна добавляться декоративная линия к тексту — подчёркивание, перечёркивание, н...

Правило @supports

Правило @supports позволяет проверить, поддерживает браузер ту или иную возможность, и на основе ...

Стиль доступных ( незаблокированных ) элементов форм

Псевдокласс <span class='samp'>:enabled</span> используется для примен...

Свойство text-decoration-style

Устанавливает стиль декоративной линии, которая добавляется к тексту через свойство text-decorati...

Свойство font-size

Определяет размер шрифта элемента.<br><br>Размер может быть установлен несколькими сп...