Свойство 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-align-last
Задаёт выравнивание последней строки блока текста....
Стили поля с неверными значениями, выходящими из заданного диапазона
Применяется к полям форм, у которых введённое пользователем значение выходит из заданного диапазона. Псевдокласс работает только для тех полей, где по...
Свойство color-scheme
Позволяет элементу указать, в каких цветовых схемах он может удобно отображаться.
Обычный выбор цветовых схем операционной системы: «светлый» и...
Свойство word-wrap
Указывает, переносить или нет длинные слова, которые не помещаются по ширине в заданную область....