Свойство 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 , представляющие собой анимацию по наведению на элемент
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-анимации».
CSS-анимации
Большой набор свойств для создания настоящих живых анимаций.
- Кратко
- @keyframes
- animation-name
- animation-duration
- animation-iteration-count
- animation-direction
- animation-timing-function
- linear
- ease
- ease-in
- ease-out
- ease-in-out
- cubic-bezier(x1, y1, x2, y2)
- step-start
- step-end
- steps(количество шагов, положение шага)
Обновлено 24 октября 2022
Кратко
Скопировать ссылку «Кратко» Скопировано
Веб в процессе развития из текста с картинками превратился в интерактивное пространство. Заходя на разные сайты, вы постоянно видите анимации. От микроскопических реакций на наведение курсора до сложных сцен.
Вернёмся к нашему розовому кругу и укажем, что он должен превращаться в синий квадрат нелинейно, медленно разгоняясь к концу анимации.
.child-one animation-name: circle-to-square; animation-duration: 5s; animation-iteration-count: infinite; animation-direction: alternate; animation-timing-function: ease-in;>.child-one animation-name: circle-to-square; animation-duration: 5s; animation-iteration-count: infinite; animation-direction: alternate; animation-timing-function: ease-in; >Анимация стала более естественной, не такой компьютерной.
Пришло время заняться правой фигурой и превратить синий квадрат в розовый круг. Используем практически те же самые свойства, что и для круга, только зададим другое значение для свойства animation — direction , чтобы шаги анимации воспроизводились в обратном порядке:
.child-two animation-name: circle-to-square; animation-duration: 5s; animation-iteration-count: infinite; animation-direction: alternate-reverse; animation-timing-function: ease-in;>.child-two animation-name: circle-to-square; animation-duration: 5s; animation-iteration-count: infinite; animation-direction: alternate-reverse; animation-timing-function: ease-in; >Сейчас обе фигуры меняются синхронно. Добавим правой фигуре небольшую задержку.
animation — delay
Скопировать ссылку «animation-delay» Скопировано
Свойство задаёт задержку воспроизведения анимации. Значением может быть любое число, как отрицательное, так и положительное.
Если значение положительное, то будет задержка перед началом анимации. Если значение отрицательное, то анимация начнётся как бы за кадром.
Пусть анимация правого элемента начнётся с задержкой -2.5 секунды. Так она будет начинаться с середины:
.child-two animation-name: circle-to-square; animation-duration: 5s; animation-iteration-count: infinite; animation-direction: alternate-reverse; animation-timing-function: ease-in; animation-delay: -2.5s;>.child-two animation-name: circle-to-square; animation-duration: 5s; animation-iteration-count: infinite; animation-direction: alternate-reverse; animation-timing-function: ease-in; animation-delay: -2.5s; >animation — play — state
Скопировать ссылку «animation-play-state» Скопировано
Свойство, позволяющее ставить анимацию на паузу и запускать снова.
- running — анимация проигрывается (значение по умолчанию).
- paused — анимация ставится на паузу. При повторном запуске анимации она продолжается с того места, где была остановлена.
Добавим возможность взаимодействовать с нашей анимацией. Пусть по наведению курсора анимация ставится на паузу, а если курсор убран, то продолжает проигрываться.
.child:hover animation-play-state: paused;>.child:hover animation-play-state: paused; >animation — fill — mode
Скопировать ссылку «animation-fill-mode» Скопировано
Последнее свойство анимации — animation — fill — mode — сообщает браузеру, нужно ли применять стили ключевых кадров до или после проигрывания анимации.
- none — стили анимации не применяются до и после проигрывания анимации (значение по умолчанию).
- forwards — после окончания анимации элемент сохранит стили последнего ключевого кадра.
- backwards — после окончания анимации к элементу будут применены стили первого ключевого кадра.
- both — до начала анимации к элементу применяется первый ключевой кадр, а после окончания анимации элемент останется в состоянии последнего ключевого кадра.
Для лучшего понимания работы этих значений посмотрите демо 👇
animation
Скопировать ссылку «animation» Скопировано
animation — это мега-шорткат, в котором можно за раз указать значения для всех перечисленных выше свойств, начинающихся на animation — .
Значения указываются через пробел. Порядок указания значений не важен. Из-за того, что значения этих свойств очень разные, браузер сам догадывается, какое значение к какому свойству относится. Важно только помнить, что первое значение времени будет воспринято как значение animation — duration (длительность анимации), а второе — animation — delay (задержка воспроизведения).
Для работы анимации совсем не обязательно перечислять все значения. Достаточно указать имя анимации и её длительность. Для остальных свойств будут установлены значения по умолчанию.
.child-two animation: circle-to-square 2s infinite alternate-reverse ease-in 1s;>.child-two animation: circle-to-square 2s infinite alternate-reverse ease-in 1s; >Несколько анимаций
Скопировать ссылку «Несколько анимаций» Скопировано
Есть возможность применить к одному элементу сразу несколько анимаций. Для этого нужно перечислить несколько значений через запятую. Возможно указать любое количество значений для любого из свойств анимации. Анимации будут воспроизводиться одновременно.
Например, разобьём предыдущую анимацию на две отдельные. Одна будет отвечать за изменение формы элемента, а вторая за изменение цвета.
@keyframes circle-to-square from width: 50px; height: 50px; > 50% width: 100%; height: 50px; > to width: 100%; height: 100%; >> @keyframes color-change from background-color: #F498AD; > 50% background-color: #7F6EDB; > to background-color: #2E9AFF; >>@keyframes circle-to-square from width: 50px; height: 50px; > 50% width: 100%; height: 50px; > to width: 100%; height: 100%; > > @keyframes color-change from background-color: #F498AD; > 50% background-color: #7F6EDB; > to background-color: #2E9AFF; > >И присвоим обе анимации одному элементу, при этом задав первой задержку, и указав разное время воспроизведения.
.child animation: circle-to-square 10s infinite alternate ease-out 1s, color-change 5s alternate linear infinite;>.child animation: circle-to-square 10s infinite alternate ease-out 1s, color-change 5s alternate linear infinite; >В итоге форма меняется за 10 секунд, а цвет перетекает из розового в синий за 5 секунд. А потом обратно. Очень красиво и медитативно 🙌
