CSS3 animation-directionСвойство

Справочник CSS


Пример

Сначала запустите анимацию один раз, затем один раз запустите её в обратном направлении:

animation-direction:alternate;
-webkit-animation-direction:alternate; /* Safari и Chrome */

Попробуйте сами »

Поддержка браузеров

Числа в таблице показывают первую версию браузера, которая полностью поддерживает это свойство.

Числа, после которых стоят -webkit-, -ms- или -moz-, указывают первую версию браузера, поддерживавшую свойство с префиксом.

Свойство
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 определяет, должна ли анимация воспроизводиться в обратном направлении поочерёдно в циклах.

Примечание:Если анимация настроена на воспроизведение только один раз, это свойство не имеет эффекта.

Значение по умолчанию: нормальный
Наследуется: нет
Анимируемый: Нет. См.Анимируемость。
версия: CSS3
Синтаксис JavaScript: object.style.animationDirection="reverse" Попробуйте сами

Синтаксис CSS

animation-direction: normal|reverse|alternate|alternate-reverse|initial|inherit;

Значение свойства

Значение Описание Тестирование
нормальный Значение по умолчанию. Анимация воспроизводится в обычном направлении.
reverse Обратное воспроизведение анимации.
alternate Анимация воспроизводится в прямом направлении на нечётных циклах (1, 3, 5...), а в обратном — на чётных циклах (2, 4, 6...).
alternate-reverse Анимация воспроизводится в обратном направлении на нечётных циклах (1, 3, 5...), а в прямом — на чётных циклах (2, 4, 6...).
initial Устанавливает для этого свойства значение по умолчанию. См.initial。
inherit Наследует свойство от родительского элемента. См. такжеinherit。

Связанные статьи

Руководство по CSS3:CSS3-анимации


Справочник CSS

Другие расширения