English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Атрибут animation-fill-mode CSS3 определяет, как стили применяются к целевому элементу анимации до и после выполнения анимации.
В таблице ниже резюмируются контексты использования и история версий этого свойства.
| Значение по умолчанию: | none |
|---|---|
| Доступно для: | Все элементы::before и::after Псевдоэлементы |
| Наследование: | Нет |
| Анимированный: | Нет.См. также Анимационные свойства. |
| Версия: | Новая функция CSS3 |
| JavaScript грамматика: | object.style.animationFillMode="forwards" |
Грамматика этого свойства такая:
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;
animation-name: moveit;
animation-duration: 4s;
animation-fill-mode: forwards;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes moveit {
from {left: 0;}
to {left: 50%;}
}
@keyframes moveit {
from {left: 0;}
to {left: 50%;}
}Проверьте‹/›В таблице ниже описаны значения этого свойства.
| Значение | Описание |
|---|---|
| none | Анимация не применяет никакой стилизации к цели до или после выполнения. |
| forwards | После завершения анимации (определяетсяanimation-iteration-count). Анимация будет применяться к значениям свойств в конце анимации. |
| backwards | Анимация будет применяться к значениям свойств, определенным в ключевых кадрах, которые будут определеныanimation-delayНачало первого выполнения анимации в течение времени, определенного свойством. Это значения ключевых кадров from (animation-directionдля normal или alternate) или значения ключевых кадров to (animation-directionдля reverse или alternate-reverse). |
| both | Анимация будет следовать правилам вперед и назад, тем самым расширяя свойства анимации в двух направлениях. |
| initial | Установите этот параметр в его значение по умолчанию. |
| inherit | Если указано, то связанный элемент использует вычисленное значение свойства animation-fill-mode родительского элемента. |
Совместимость браузеров для свойства animation-fill-mode, все основные браузеры поддерживают это свойство.
|
Узнайте больше из следующих учебников:CSS3 анимации.
Соответствующие свойства и правила: animation,animation-name,animation-duration,animation-timing-function,animation-delay,animation-iteration-count,animation-direction,animation-play-state,@keyframes.