CSS animation-direction Свойство
Пример
Сначала воспроизвести анимацию вперед, а затем назад:
div {
animation-direction: alternate;
}
Подробнее примеры ниже.
Определение и использование
Свойство animation-direction
определяет, следует ли воспроизвести анимацию вперед, назад или в альтернативных циклах.
Значение по умолчанию: | normal |
---|---|
Inherited: | no |
Animatable: | no. Читайте о animatable |
Version: | CSS3 |
Синтаксис JavaScript: | object.style.animationDirection="reverse" |
Поддержка браузера
Номера в таблице указывают первую версию браузера, которая полностью поддерживает свойство.
Номера следуют -webkit-, -moz-, or -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- |
Синтаксис CSS
animation-direction: normal|reverse|alternate|alternate-reverse|initial|inherit;
Значения свойств
Значение | Описание | ||
---|---|---|---|
normal | Значение по умолчанию. Анимация воспроизводится как обычная (вперед) | ||
reverse | Анимация воспроизводится в обратном направлении (назад) | ||
alternate | Анимация сначала разыгрывается вперед, затем назад | ||
alternate-reverse | Анимация сначала воспроизводится назад, а затем пересылается | ||
initial | Присваивает этому свойству значение по умолчанию. (Читайте о initial) | ||
inherit | Наследует это свойство из родительского элемента. (Читайте о inherit) |
Другие примеры
Пример
Сначала воспроизводите анимацию в обратном направлении, затем вперед:
div {
animation-direction: alternate-reverse;
}
Пример
Воспроизвести анимацию в обратном направлении:
div {
animation-direction: reverse;
}
Похожие страницы
CSS Справочник: CSS Анимация
HTML DOM Справочник: animationDirection Свойство