html.okpython.net
Основы создания сайтов
CSS :: Свойство animation-direction
css-свойство animation-direction (от англ. animation direction – направление анимации) задает направление движения анимации.
Характеристики
- Значение по умолчанию: normal.
- Применяется: ко всем элементам, а также к псевдоэлементам ::before и ::after.
- Наследуется: нет.
- Анимируется: нет.
- JavaScript: object.style.animationDirection="value".
Синтаксис
animation-direction: normal | alternate | reverse | alternate-reverse
Значения
- normal – после завершения цикла, анимация сбрасывается в исходное состояние и стартует заново (используется по умолчанию).
- alternate – после завершения цикла, анимация начинает шаг за шагом воспроизводиться в обратном направлении.
- reverse – анимация начинается сразу с конца цикла, выполняя все шаги в обратном направлении, а затем сбрасывается опять в конец цикла.
- alternate-reverse – анимация начинается сразу с конца цикла, выполняя все шаги в обратном направлении, а затем начинает шаг за шагом воспроизводиться в прямом направлении, возвращаясь в конец цикла, который в данном случае является стартовой точкой.
Ссылки
Официальный сайт W3C: https://www.w3.org/TR/css-animations-1/#animation-direction
Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/animation-direction
Примеры
HTML
Результат
htmlCodes
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Пример №1</title> <style> div{ margin-top: 5em; overflow: hidden; white-space: nowrap; padding: 1em; width: 460px; height: 50px; border: solid 4px red; } /* Задаем общие свойства анимации */ .anim{ animation-name: example_1; animation-duration: 5s; animation-timing-function: ease-in-out; animation-delay: 1.3s; animation-iteration-count: infinite; animation-fill-mode: backwards; } /* Задаем направление анимации */ .anim_dir_1{ animation-direction: normal; } .anim_dir_2{ animation-direction: alternate; } /* Анимируем ширину элемента */ @keyframes example_1{ from{ width: 0px; } to{ width: 500px; } } </style> </head> <body> <div class="anim anim_dir_1">animation-direction: normal</div> <div class="anim anim_dir_2">animation-direction: alternate</div> </body> </html>
Пример №1