СSS Свойство animation-direction
Пример
Воспроизведение анимации сначала вперед, а затем назад:
div {
animation-direction: alternate;
}
Редактор кода »
Определение и использование
Свойство animation-direction определяет, следует ли воспроизводить анимацию вперед, назад или в альтернативных циклах.
| Значение по умолчанию: | normal |
|---|---|
| Унаследованный: | нет |
| Анимируемый: | нет. Прочитать о animatable |
| Версия: | CSS3 |
| JavaScript синтаксис: | object.style.animationDirection="reverse" Попробовать |
Поддержка браузеров
Числа в таблице указывают первую версию браузера, которая полностью поддерживает свойство.
Числа, за которыми следуют -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- |
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 Animations
HTML DOM справочник: Свойство animationDirection
