пример
Сделайте анимацию один раз, а затем делать анимацию в обратном направлении:
div {
-webkit-animation-direction: alternate; /* Chrome, Safari,
Opera */
animation-direction: alternate;
} Попробуй сам " Определение и использование
Свойство анимации-направление определяет, следует ли анимация играть в обратном направлении или в альтернативных циклах.
| Значение по умолчанию: | normal |
|---|---|
| Наследование: | no |
| Animatable: | no. Read about animatable |
| Версия: | CSS3 |
| Синтаксис JavaScript: | object .style.animationDirection="reverse" Try it |
Поддержка браузеров
Числа в таблице указать первую версию браузера, которая полностью поддерживает свойство.
Числа следуют -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 -о- |
CSS Синтаксис
animation-direction: normal|reverse|alternate|alternate-reverse|initial|inherit;Значения свойств
| Стоимость | Описание | Сыграй |
|---|---|---|
| normal | Значение по умолчанию. Анимация должна играть в обычном режиме | Сыграй " |
| reverse | Анимация должна играть в обратном направлении | Сыграй " |
| alternate | Анимация будет воспроизводиться как обычно каждый нечетный время (1,3,5,etc..) и в обратном направлении , каждый хотя бы раз (2,4,6,etc...) | Сыграй " |
| alternate-reverse | Анимация будет воспроизводиться в обратном направлении , каждый нечетный время (1,3,5,etc..) и в нормальном направлении каждый даже время (2,4,6,etc...) | Сыграй " |
| initial | Устанавливает это свойство в значение по умолчанию. Читайте о первоначальный | |
| inherit | Наследует это свойство от своего родительского элемента. Читайте о унаследовать |
Примечание: "reverse" и "alternate-reverse" значения не поддерживаются в Safari.
Похожие страницы
CSS3 учебник: CSS3 Animations
HTML DOM ссылка: animationDirection property