--- title: animation-fill-mode slug: Web/CSS/animation-fill-mode tags: - CSS - CSS анимации - CSS свойства translation_of: Web/CSS/animation-fill-mode ---
{{CSSRef}}{{SeeCompatTable}}

Описание

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

{{cssinfo}}

Синтаксис

animation-fill-mode: none;
animation-fill-mode: forwards;
animation-fill-mode: backwards;
animation-fill-mode: both;

/* Несколько значений могут быть заданы через запятую. */
/* Каждое значение соответствует для анимации в animation-name. */
animation-fill-mode: none, backwards;
animation-fill-mode: both, forwards, none;

Значения

none
Стили анимации не будут применены к элементу до и после ее выполнения.
forwards
По окончании анимации элемент сохранит стили последнего ключевого кадра, который определяется значениями {{cssxref("animation-direction")}} и {{cssxref("animation-iteration-count")}}:
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
backwards
Элемент сохранит стиль первого ключевого кадра на протяжении периода {{cssxref("animation-delay")}}. Первый ключевой кадр определяется значением {{cssxref("animation-direction")}}:
animation-direction первый ключевой кадр
normal или alternate 0% или from
reverse или alternate-reverse 100% или to
both
Анимация будет вести себя так, как будто значения forwards и backwards заданы одновременно.

Формальный синтаксис

{{csssyntax}}

Пример

Вы можете посмотреть эффект animation-fill-mode в следующем примере. По умолчанию, по окончании анимации стиль элемента возвращается к исходному. Значение forwards сохранит для элемента стиль последнего ключевого кадра.

HTML

<p>Наведите курсор мыши на серый блок</p>
<div class="demo">
  <div class="grows">Этот просто растет</div>
  <div class="growsandstays">Этот растет и остается большим</div>
</div>

CSS

.demo {
  border-top: 100px solid #ccc;
  height: 300px;
  font-family: sans-serif;
}
@keyframes grow {
    0% { font-size: 0 }
    100% { font-size: 40px }
}
@-webkit-keyframes grow {
    0% { font-size: 0 }
    100% { font-size: 40px }
}
.demo:hover .grows {
    animation-name: grow;
    animation-duration: 3s;
    -webkit-animation-name: grow;
    -webkit-animation-duration: 3s;
}
.demo:hover .growsandstays {
    animation-name: grow;
    animation-duration: 3s;
    animation-fill-mode: forwards;
    -webkit-animation-name: grow;
    -webkit-animation-duration: 3s;
    -webkit-animation-fill-mode: forwards;
}

{{EmbedLiveSample('Example',700,300)}}

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

Спецификация Статус Комментарий
{{SpecName('CSS3 Animations', '#animation-fill-mode', 'animation-fill-mode')}} {{Spec2('CSS3 Animations')}} Начальное определение

Совместимость с браузерами

{{CompatibilityTable}}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support {{CompatVersionUnknown}}{{property_prefix("-webkit")}}
{{CompatChrome(43.0)}}		 {{CompatGeckoDesktop("5.0")}}{{property_prefix("-moz")}}
{{CompatGeckoDesktop("16.0")}}		 10 12{{property_prefix("-o")}}
12.10		 4.0{{property_prefix("-webkit")}}
Feature Android Chrome Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile Chrome for Android
Basic support {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}}

Смотрите также