CSS-свойство animation-fill-mode определяет, как CSS-анимация должна применять стили к своей цели до и после ее выполнения.

Значение по умолчанию: none
Применяется к: Все элементы, ::before и ::after псевдо-элементы
Наследование: Нет
Анимирование: Нет. Анимируемые свойства
Версия: Новый в CSS3

Синтаксис

Синтаксически свойства задаются по следующему шаблону:

animation-fill-mode: none | forwards | backwards | both | initial | inherit

Примеры написания кода свойства animation-fill-mode:

.box {
    width: 50px;
    height: 50px;
    background: red;
    position: relative;
    /* Chrome, Safari, Opera */
    -webkit-animation-name: moveit;
    -webkit-animation-duration: 4s;
    -webkit-animation-fill-mode: forwards;
    /* Standard syntax */
    animation-name: moveit;
    animation-duration: 4s;
    animation-fill-mode: forwards;
}
 
/* Chrome, Safari, Opera */
@-webkit-keyframes moveit {
    from {left: 0;}
    to {left: 50%;}
}
 
/* Standard syntax */
@keyframes moveit {
    from {left: 0;}
    to {left: 50%;}
}

Значения свойств

В следующей таблице описаны значения этого свойства.

Значение Описание
none Анимация не будет применять какие-либо стили к цели до или после ее выполнения..
forwards После завершения анимации (как определено в свойстве animation-iteration-count) анимация будет применять значения свойств к моменту окончания анимации.
backwards Анимация будет применять значения свойств, определенные в @keyframe, который запустит первую итерацию анимации, в течение периода, определенного свойством animation-delay. Это либо значения ключевого кадра from (когда animation-direction равно normal, либо alternate) или ключевые кадры to (когда animation-direction равно reverse или alternate-reverse).
both Анимация будет следовать правилам как вперед, так и назад, расширяя свойства анимации в обоих направлениях.
initial Устанавливает это свойство в значение по умолчанию.
inherit Если указан, связанный элемент принимает вычисленное значение своего свойства родительского элемента animation-fill-mode.

Поддержка браузеров

Свойство animation-fill-mode поддерживается во всех основных браузерах.

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

Похожие посты

CSS-свойство clip

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

CSS-свойство bottom

Задает смещение или отступ от нижнего края элемента

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.