Animation css обратная анимация

animation-direction

CSS свойство animation-direction указывает будет ли анимация проигрываться в реверсе на альтернативных циклах.

Если значение свойства animation-direction установлено как «alternate», анимация будет проигрываться как «normal» каждый нечетный раз (1,3,5 и тд) и как реверс каждый четный раз (2,4,6 и тд).

Если в настройках анимации установлено проигрывание только однажды, это свойство не будет иметь эффекта.

Значение по умолчанию:	normal
Применяется:	ко всем элементам и псевдо-элементам ::before и ::after
Анимируется:	нет
Наследуется:	нет
Версия:	CSS3
Синтаксис JavaScript:	object.style.animationDirection=»alternate»

Синтаксис

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

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

Значение	Описание
normal	После прохождения полного цикла анимация сбрасывается в начальное состояние и начинается заново.
reverse	Анимация воспроизводится в обратном направлении, то есть каждый раз анимация начинает свое воспроизведения со своей конечной точки, проходит весь цикл и начинается заново.
alternate	После прохождения полного цикла анимация изменяет свое направление на противоположное. При воспроизведении в обратном направлении все шаги анимации выполняются наоборот.
alternate-reverse	Анимация начинает воспроизводится в обратном направлении, потом меняя свое направление на противоположное.

Источник

animation — direction

Решаем, в каком направлении будет проигрываться анимация.

Время чтения: меньше 5 мин

Обновлено 20 декабря 2021

Кратко

Скопировать ссылку «Кратко» Скопировано

Свойство animation — direction сообщает браузеру, должна ли анимация проигрываться в обратном порядке.

Пример

Скопировать ссылку «Пример» Скопировано

 .element  animation-name: circle-to-square; animation-duration: 2s; animation-iteration-count: infinite; animation-direction: alternate;> .element  animation-name: circle-to-square; animation-duration: 2s; animation-iteration-count: infinite; animation-direction: alternate; >    Скопировать Скопировано Не удалось скопировать   

Как пишется

Скопировать ссылку «Как пишется» Скопировано

• normal — значение по умолчанию, анимация воспроизводится от начала до конца, после чего возвращается к начальному кадру.
• reverse — анимация проигрывается в обратном порядке, от последнего ключевого кадра до первого, после чего возвращается к последнему кадру.
• alternate — каждый нечётный повтор (первый, третий, пятый) анимации воспроизводится в прямом порядке, а каждый чётный повтор (второй, четвёртый, шестой) анимации воспроизводится в обратном порядке.
• alternate — reverse — аналогично значению alternate , но чётные и нечётные повторы меняются местами.

Подсказки

Скопировать ссылку «Подсказки» Скопировано

Подробнее об анимациях написано в статье «CSS-анимации».

Источник

animation-direction

The animation-direction CSS property sets whether an animation should play forward, backward, or alternate back and forth between playing the sequence forward and backward.

Try it

It is often convenient to use the shorthand property animation to set all animation properties at once.

Syntax

/* Single animation */ animation-direction: normal; animation-direction: reverse; animation-direction: alternate; animation-direction: alternate-reverse; /* Multiple animations */ animation-direction: normal, reverse; animation-direction: alternate, reverse, normal; /* Global values */ animation-direction: inherit; animation-direction: initial; animation-direction: revert; animation-direction: revert-layer; animation-direction: unset; 

Values

The animation plays forwards each cycle. In other words, each time the animation cycles, the animation will reset to the beginning state and start over again. This is the default value.

The animation plays backwards each cycle. In other words, each time the animation cycles, the animation will reset to the end state and start over again. Animation steps are performed backwards, and easing functions are also reversed. For example, an ease-in easing function becomes ease-out .

The animation reverses direction each cycle, with the first iteration being played forwards. The count to determine if a cycle is even or odd starts at one.

The animation reverses direction each cycle, with the first iteration being played backwards. The count to determine if a cycle is even or odd starts at one.

Note: When you specify multiple comma-separated values on an animation-* property, they are applied to the animations in the order in which the animation-name s appear. For situations where the number of animations and animation-* property values do not match, see Setting multiple animation property values.

Note: When creating CSS scroll-driven animations, specifying an animation-direction works as expected, for example reverse causes the animation to run in reverse over the course of the timeline’s progression. A value of alternate (combined with an animation-iteration-count ) causes the animation to run forwards and backwards as the timeline is progressed.

Formal definition

Formal syntax

animation-direction =
#

=
normal |
reverse |
alternate |
alternate-reverse

Источник

Свойство animation-direction

Свойство animation-direction задает направление анимации. По умолчанию анимация повторится только 1 раз и затем вернется в исходное состояние, затем, если задана задержка animation-delay , будет ждать заданное время и потом цикл начнется сначала.

Данное свойство позволяет поменять это поведение, например, так чтобы анимация после окончания оставалась в том месте, где она закончилась, а не перескакивала в начальное положение.

Также можно задать такое поведение: анимация дойдет до крайней точки и вернется обратно (как в transition ). Смотрите описание ниже.

Синтаксис

Значения

Значение	Описание
reverse	Анимация будет проигрываться в обратном направлении.
alternate	Анимация будет проигрываться сначала в прямом, а потом в обратном направлении (как transition).
alternate-reverse	Анимация будет проигрываться из конечного положения в начальное и обратно. По сути это значения alternate и reverse в одном флаконе.
normal	Анимация будет проигрываться от начала к концу, а после окончания скачком перескакивать в начальное положение.

Значение по умолчанию: normal .

Пример

Сейчас элемент будет двигаться в одну сторону, а потом возвращаться обратно, так как задано значение alternate . При этом animation-duration имеет значение 3 секунды и это значит, что перемещения «туда» и «обратно» будут длиться по 3 секунды:

Пример

Сейчас элемент будет двигаться в обратную сторону (должен слева направо, а будет справа налево):

Пример

Сейчас элемент будет двигаться туда-сюда, но в обратном направлении (должен начинать слева, а будет начинать справа):

Смотрите также

• свойство animation-name ,
  которое задает имя анимации
• свойство animation-duration ,
  которое задает продолжительность анимации
• свойство animation-delay ,
  которое задает задержку перед выполнением анимации
• свойство animation-timing-function ,
  которое задает скорость выполнения анимации
• свойство animation-iteration-count ,
  которое задает количество итераций анимации
• свойство animation-fill-mode ,
  которое задает состояние анимации
• свойство animation-play-state ,
  которое позволяет поставить анимацию на паузу
• свойство animation ,
  представляющее собой сокращение для анимаций
• команду @keyframes ,
  задающую ключевые кадры анимации
• плавные переходы transition , представляющие собой анимацию по наведению на элемент

Источник

CSS animation-direction Property

The animation-direction property defines whether an animation should be played forwards, backwards or in alternate cycles.

Default value:	normal
Inherited:	no
Animatable:	no. Read about animatable
Version:	CSS3
JavaScript syntax:	object.style.animationDirection=»reverse» Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Numbers followed by -webkit-, -moz-, or -o- specify the first version that worked with a prefix.

CSS Syntax

Property Values

Value	Description	Demo
normal	Default value. The animation is played as normal (forwards)	Play it »
reverse	The animation is played in reverse direction (backwards)	Play it »
alternate	The animation is played forwards first, then backwards	Play it »
alternate-reverse	The animation is played backwards first, then forwards	Play it »
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

More Examples

Example

Play the animation backwards first, then forwards:

Example

Play the animation backwards:

Related Pages

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник