Элемент для триггера
После отведения курсора
Число повторений
Направление проигрывания

В этой статье мы расскажем о настройках запуска анимации При наведении.

Триггер — это элемент, при взаимодействии с которым запускается анимация. 

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

Рассмотрим на примере. Если по умолчанию триггер это квадрат, то анимация квадрата запустится при наведении на квадрат.

Если назначить триггером круг, то анимация квадрата запустится при наведении на круг.

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

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

На паузе — после отведения курсора анимация ставится на паузу. 

Проигрывать заново — после проигрывания анимация остается на последнем шаге. Но при повторном наведении курсора, анимация возвращается в начальное положение и проигрывается повторно.

Проигрывать обратно — после проигрывания анимация остается на последнем шаге. Но при повторном наведении курсора она проигрывается обратно к изначальному положению. 

Сбрасывать в начало — как только курсор покидает элемент, анимация начинается сначала. 

Число повторений. По умолчанию анимация проигрывается один раз. Также вы можете  задать число повторений или настроить бесконечный повтор, зациклив шаги.

В примере ниже показываем варианты настройки повторения.

У анимации есть два направления проигрывания: 

Туда —  анимация проигрывается от начального положения до последнего шага.

Туда-обратно — когда анимация после завершения проигрывается обратно до начального положения.