пример
Анимируйте то движение от одного места к другому и его пребывание там:
div {
-webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */
animation-fill-mode: forwards;
} Попробуй сам " Определение и использование
Свойство анимационная-фасовочно-режим определяет стиль для элемента , когда анимация не воспроизводится (when it is finished, or when it has a delay) .
По умолчанию, CSS анимации не влияют на элемент , пока первый ключевой кадр не "played" , а затем останавливается , как только последний ключевой кадр завершен. Свойство анимационная-фасовочно-режим может переопределить это поведение.
| Значение по умолчанию: | none |
|---|---|
| Наследование: | no |
| Animatable: | no. Read about animatable |
| Версия: | CSS3 |
| Синтаксис JavaScript: | object .style.animationFillMode="forwards" Try it |
Поддержка браузеров
Числа в таблице указать первую версию браузера, которая полностью поддерживает свойство.
Числа следуют -webkit-, -moz- или -O- указать первую версию, которая работала с приставкой.
| Имущество | |||||
|---|---|---|---|---|---|
| animation-fill-mode | 4.0 -webkit- | 10,0 | 16,0 5,0 -moz- | 4.0 -webkit- | 15,0 -webkit- 12.1 12,0 -о- |
CSS Синтаксис
animation-fill-mode: none|forwards|backwards|both|initial|inherit;Значения свойств
| Стоимость | Описание |
|---|---|
| none | Значение по умолчанию. Анимации не будет применять любые стили к целевому элементу до или после его выполнения |
| forwards | После завершения анимации (determined by animation-iteration-count) , анимация будет применять значения свойств в течение времени анимация закончилась |
| backwards | Анимация будет применить значения свойств, определенные в ключевом кадре, который начнет первой итерации анимации, в течение периода, определенного анимации задержки. Это либо значения От ключевого кадра (when animation-direction is "normal" or "alternate") или те из ключевого кадра (when animation-direction is "reverse" or "alternate-reverse") |
| both | Анимация будет следовать правилам для обоих вперед и назад. То есть, он будет простираться свойства анимации в обоих направлениях |
| initial | Устанавливает это свойство в значение по умолчанию. Читайте о первоначальный |
| inherit | Наследует это свойство от своего родительского элемента. Читайте о унаследовать |
Похожие страницы
CSS3 учебник: CSS3 Animations
HTML DOM ссылка: animationFillMode property