CSS свойство animation-fill-mode

Определение и применение

Свойство animation-fill-mode определяет, применяются ли значения анимации к элементу во время задержки перед стартом и после завершения. Свойство не заменяет паузу и не изменяет исходные CSS-правила элемента.

Основы и примеры — в уроке об анимациях CSS. Несколько настроек можно объединить сокращённым свойством animation.

В генераторе анимаций можно сравнить поведение до старта и после завершения.

Попробуйте значения animation-fill-mode

Здесь один проход с задержкой 1s. Смотрите на положение до старта и после завершения. Переключите значение, чтобы запустить сцену заново.

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

animation-fill-mode: none

HTML и CSS примера
HTML
<div class="stage">
  <div class="demo-target">CSS</div>
</div>
CSS
* {
  box-sizing: border-box;
}
.stage {
  width: 100%;
  max-width: 300px;
  height: 210px;
  display: grid;
  place-items: center;
  padding: 20px;
  border: 2px dashed #607589;
  background: #edf2f5;
  color: #172c3d;
  font: 16px/1.4 system-ui;
}
.demo-target {
  width: 100px;
  height: 80px;
  display: grid;
  place-items: center;
  border: 3px solid #245a85;
  background: #ffe4bd;
  animation-name: travel;
  animation-duration: 2s;
  animation-timing-function: linear;
  animation-iteration-count: 1;
  animation-delay: 1s;
  animation-direction: alternate;
  animation-fill-mode: none;
}
@keyframes travel {
  from {
    transform: translateX(-55px);
  }
  to {
    transform: translateX(55px);
  }
}
@keyframes turn {
  from {
    transform: rotate(-30deg);
  }
  to {
    transform: rotate(30deg);
  }
}

Поддержка браузерами

Спецификация: CSS animations

Поддерживается во всех основных браузерах с 2016 года.

Показать браузеры
Совместимостьcss.properties.animation-fill-mode
ВозможностьКомпьютерыМобильные
ChromeEdgeFirefoxOperaSafariChrome AndroidFirefox for AndroidOpera AndroidSafari on iOSSamsung BrowserWebView AndroidWebView on iOS
animation-fill-mode✓43✓12✓16✓30✓9✓43✓16✓30✓9✓4.0✓43✓9
backwards✓3✓12✓5✓15✓5✓18✓5✓14✓4.2✓1.0✓4.4✓4.2
both✓3✓12✓5✓15✓5✓18✓5✓14✓4.2✓1.0✓4.4✓4.2
forwards✓3✓12✓5✓15✓5✓18✓5✓14✓4.2✓1.0✓4.4✓4.2
none✓3✓12✓5✓15✓5✓18✓5✓14✓4.2✓1.0✓4.4✓4.2

поддерживаетсяс ограниченияминет поддержкинет данных≤31 — не позднее версии 31

CSS синтаксис:

CSS
animation-fill-mode: [ none | forwards | backwards | both ]#;

/* Глобальные значения */
animation-fill-mode: initial | inherit | unset | revert | revert-layer;

Знак # означает одно или несколько значений через запятую. Знак | разделяет варианты. Квадратные скобки группируют варианты.

JavaScript синтаксис:

JavaScript
element.style.animationFillMode = "both";

Начальное значение свойства

none.

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

Значения animation-fill-mode
Значение Описание
none До начала и после конца анимация не влияет на свойства: действуют остальные правила каскада. Начальное значение.
forwards После завершения сохраняется результат в конечной точке воспроизведения с учётом направления и числа циклов. При дробном числе циклов это может быть промежуточное состояние.
backwards Во время задержки применяется стартовое состояние: from для normal и alternate, to для reverse и alternate-reverse.
both Совмещает backwards до старта и forwards после завершения.
initial Устанавливает начальное значение свойства.
inherit Наследует вычисленное значение свойства у родительского элемента.
unset Для ненаследуемого свойства animation-fill-mode устанавливает его начальное значение.
revert Отменяет заданное в коде значение свойства для этого элемента: применяются пользовательские или стандартные стили браузера. Если они не задают значение, свойство наследуется или получает начальное значение по обычным правилам. Не возвращает значение из предыдущей строки CSS.
revert-layer Сбрасывает значение свойства для текущего слоя каскада @layer. Применяется значение из другого слоя по правилам каскада; если подходящего значения нет, возможен откат к стилям пользователя или браузера.

Значения через запятую соответствуют именам в animation-name по порядку. Если значений меньше, список повторяется; лишние значения не используются.

Какое состояние сохраняется

При положительном целом числе циклов normal заканчивается на to, а reverse — на from. Для alternate нечётное число заканчивается на to, чётное — на from; для alternate-reverse наоборот.

При animation-iteration-count: 2.5 и normal сохраняется середина третьего цикла. При infinite завершения нет. Удаление анимации, например через animation-name: none, убирает и сохранённый ею результат.

Спецификация

CSS Animations Level 1.

Наследуется

Нет.

Анимируемое

Нет.

Примеры, попробуйте сами

До старта и после завершения

Сравните none и both при задержке 2s и одном цикле. Исходный блок синий, начальный кадр оранжевый, конечный зелёный. Попробуйте forwards и backwards. Выключите и включите анимацию, чтобы повторить.

base.css
CSS
* {
    box-sizing: border-box;
}
body {
    margin: 16px;
    font:
        16px/1.4 system-ui,
        sans-serif;
    color: #172c3d;
}
.track {
    position: relative;
    height: 70px;
    margin-top: 16px;
    border: 1px dashed #607589;
    background: #edf2f5;
}
.box {
    position: absolute;
    top: 12px;
    left: 0;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 6px;
    background: #245a85;
    color: white;
}
.run:not(:checked) ~ .track .box {
    animation-name: none;
}
index.html
HTML
<input class="run" type="checkbox" id="run" checked />
<label for="run">Запустить анимацию</label>
<div class="track"><span class="box">A</span></div>
<div class="track second"><span class="box">B</span></div>
style.css
CSS
.box {
    animation-name: travel;
    animation-duration: 3s;
    animation-delay: 2s;
    animation-timing-function: linear;
    animation-fill-mode: none;
}
.second .box {
    animation-fill-mode: both;
}

/* Длина пути зависит от ширины дорожки: пример помещается на телефоне. */
@keyframes travel {
    from {
        left: 0;
        background: #a64400;
    }
    to {
        left: calc(100% - 42px);
        background: #16703c;
    }
}

Направление, число циклов и сохранённый результат

У всех блоков forwards. В исходном коде A проходит normal один раз и остаётся справа; B проходит reverse и остаётся слева; C проходит alternate два раза и возвращается влево; D проходит normal 2.5 раза и остаётся посередине. Измените число циклов C на 3. Для повторного запуска используйте флажок.

base.css
CSS
* {
    box-sizing: border-box;
}
body {
    margin: 16px;
    font:
        16px/1.4 system-ui,
        sans-serif;
    color: #172c3d;
}
.track {
    position: relative;
    height: 70px;
    margin-top: 16px;
    border: 1px dashed #607589;
    background: #edf2f5;
}
.box {
    position: absolute;
    top: 12px;
    left: 0;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 6px;
    background: #245a85;
    color: white;
}
.run:not(:checked) ~ .track .box {
    animation-name: none;
}
index.html
HTML
<input class="run" type="checkbox" id="run" checked />
<label for="run">Запустить анимацию</label>
<div class="track"><span class="box">A</span></div>
<div class="track second"><span class="box">B</span></div>
<div class="track third"><span class="box">C</span></div>
<div class="track fourth"><span class="box">D</span></div>
style.css
CSS
.box {
    animation-name: travel;
    animation-duration: 2s;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
    animation-direction: normal;
}
.second .box {
    animation-direction: reverse;
}
.third .box {
    animation-direction: alternate;
    animation-iteration-count: 2;
}
.fourth .box {
    animation-iteration-count: 2.5;
}
@keyframes travel {
    from {
        left: 0;
    }
    to {
        left: calc(100% - 42px);
    }
}