Воспроизведите анимацию сначала вперед, затем назад:
div {
animation-direction: alternate;
}
Попробуйте сами »
Определение animation-direction
CSS свойство animation-direction
определяет, следует ли воспроизводить анимацию вперед, назад или чередовать циклы.
Значение по умолчанию: | normal |
---|---|
Унаследовано: | no |
Анимируемый: | no. Читайте о animatable |
Версия: | CSS3 |
JavaScript синтаксис: | object.style.animationDirection="reverse" Попробуй |
Поддержка animation-direction
Цифры в таблице указывают первую версию браузера, которая полностью поддерживает это свойство.
Цифры, за которыми следуют -webkit-, -moz- или -o-, указывают первую версию, которая работала с префиксом.
Свойство | |||||
---|---|---|---|---|---|
animation-direction | 43.0 4.0 -webkit- |
10.0 | 16.0 5.0 -moz- |
9.0 4.0 -webkit- |
30.0 15.0 -webkit- 12.0 -o- |
Синтаксис animation-direction
animation-direction: normal|reverse|alternate|alternate-reverse|initial|inherit;
Значения animation-direction
Значение | Описание | Воспроизведение |
---|---|---|
normal | Значение по умолчанию. Анимация воспроизводится в обычном режиме (перемотка вперед) | Воспр. » |
reverse | Анимация воспроизводится в обратном направлении (задом наперед) | Воспр. » |
alternate | Анимация воспроизводится сначала вперед, затем назад | Воспр. » |
alternate-reverse | Анимация воспроизводится сначала в обратном направлении, затем вперед | Воспр. » |
initial | Устанавливает для этого свойства значение по умолчанию. Читайте о initial | |
inherit | Наследует это свойство от своего родительского элемента. Читайте о inherit |
Примеры animation-direction
Воспроизведите анимацию сначала в обратном направлении, затем вперед:
div {
animation-direction: alternate-reverse;
}
Попробуйте сами »
Воспроизведите анимацию в обратном порядке:
div {
animation-direction: reverse;
}
Попробуйте сами »
Страницы по теме animation-direction
CSS Учебник: CSS Анимация
HTML DOM справочник: animationDirection свойство