Создание сайта на CMS WordPress: обучение и хостинг

СВОЙСТВО ANIMATION-FILL-MODE

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

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


10+

Синтаксис

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

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

Значение	Описание
none	Анимация не будет применять какие-либо стили к элементу до или после его выполнения. Это значение по умолчанию.
forwards	Элемент сохранит значения стиля, установленные последним ключевым кадром.
backwards	Элемент получит значения стиля, которые установлены первым ключевым кадром, и сохранит его в течение периода свойства animation-delay.
both	Анимация будет вести себя так, как будто значения forwards и backwards заданы одновременно.
initial	Устанавливает значение по умолчанию.
inherit	Унаследует значение свойства от родительского элемента.

Песочница

<div class="item"></div>

HTML

.item {
    width: 120px;
    height: 120px;
    background: beige;
    position: relative;
    animation: animation 5s infinite;
    animation-direction: alternate;
    animation-delay: 2s;
    animation-fill-mode: backwards
}

@keyframes animation {
    from {
        left: 0px;
        border-radius: 50%;
    } to {
        left: 280px;
        border-radius: 0;
    }
}

CSS

← Перейти к списку свойств