В этой статье мы расскажем о настройках запуска анимации При наведении.
Элемент для триггера
Триггер — это элемент, при взаимодействии с которым запускается анимация.
По умолчанию триггером работает элемент с анимацией, но вы также можете назначить триггером любой другой элемент, секцию или класс.
Рассмотрим на примере. Если по умолчанию триггер это квадрат, то анимацияквадрата запустится при наведении на квадрат.
Если назначить триггером круг, то анимация квадрата запустится при наведении накруг.
Для триггера можно выбрать неколько элементов, секцию или свой класс.
После отведения курсора
Здесь вы можете настроить, что будет происходит с анимацией после того, как вы отводите курсор.
Ничего не делать — после запуска анимация проигрывается и остается в состоянии последнего шага, пока пользователь не обновит страницу.
Проигрывать заново — после проигрывания анимация остается на последнем шаге. Но при повторном наведении курсора, анимация возвращается в начальное положение и проигрывается повторно.
Проигрывать обратно — после проигрывания анимация остается на последнем шаге. Но при повторном наведении курсора она проигрывается обратно к изначальному положению.
Сбрасывать в начало — как только курсор покидает элемент, анимация начинается сначала.
Число повторений
Число повторений. По умолчаниюанимация повторяется один раз. Также вы можете задать число повторений или настроить бесконечный повтор, зациклив шаги.
В примере ниже показываем варианты настройки повторения.
Направление проигрывания
У анимации есть два направления проигрывания:
Туда — анимация проигрывается от начального положения до последнего шага.
Туда-обратно — когда анимация после завершения проигрывается обратно до начального положения.