Свойство 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>Размер может быть установлен несколькими сп...