Тренажёр
Сбс анимация.
on hover / on click
Урок 20
Чтобы посмотреть тренажёр, откройте его через десктопную версию
Пример анимации из урока:
On click
On hover
On trigger
Попробуй настроить треггерную анимацию, где при наведении на третий элемент будет появляться второй элемент
На каждом этапе не забывай сохранять изменения в блоке
и опубликовывать эту страницу,
чтобы посмотреть результат
Настрой на первый элемент анимацию увеличения и поворота на 360о. Сначала по наведению, потом по клику
Инструкция:
Ниже находятся три элемента, на каждый
из которых нужно настроить анимацию
01
03
02
Один раз
С обратным воспроизведением
Без обратного воспроизведения
Зациклить
Не зацикливать
По наведению, триггер на оранжевый квадрат, по нему вращение и увеличение синего
По наведению, триггер на оранжевый квадрат, по нему вращение синего
По клику, триггер на оранжевый квадрат, по нему вращение синего
По клику, триггер на оранжевый квадрат, по нему фон становится красный
услуга 3
услуга 2
услуга 1
Шпаргалка
посмотреть
Шпаргалка
Step1:
Duration: 1
Scale: 130
Rotate: 360
Event:
On hover
Step 4:
Duration: 0.5
Scale: 130
Rotate: 360
Event:
On hover
Trigger:
Shape
Step 1:
Duration: 0
Opacity: 0
Step 2:
Duration: 0.5
Opacity: 100
02
01
Step1:
Duration: 1
Scale: 130
Rotate: 360
Event:
On click
Step 4:
Duration: 0.5
Scale: 130
Rotate: 360
Event:
On click
Trigger:
Shape
Step 1:
Duration: 0
Opacity: 0
Step 2:
Duration: 0.5
Opacity: 100