Тренажёр
SBS анимация.
element on screen/ block on screen
Урок 20
Чтобы посмотреть тренажёр, откройте его через десктопную версию
Пример анимации из урока:
Попробуй на один круг задать
анимацию element on screen,
а на второй block on screen
(чтобы увидеть разницу между ними)
Сохрани изменения в блоке
и опубликуй эту страницу,
чтобы посмотреть результат
Анимация движения вправо
с увеличением и поворотом круга (настрой эту анимацию для 1 и 2 круга)
Инструкция:
Ниже находятся два элемента, на каждый
из которых нужно настроить анимацию
01
03
02
Element on screen
Block on screen
Пролистни до элементов
Движение круга по траектории квадрата с разнообразными изменениями в шагах
Продублируй один из кругов 3 раза, настрой анимацию движения сверху вниз и задай каждому кругу свою зацикленность (loop)
Можешь пройтись по всем
анимациям из урока:
02
01
Шпаргалка
доп. задания
Шпаргалка
задания
Step 1:
Duration: 3
Move x: 417 y:-26
Scale: 300
Opacity: 100
Rotate: 360
Easing: Easy in out
Event:
Block on screen
Step1:
Duration: 3
Move x: 417 y:-26
Scale: 300
Opacity: 100
Rotate: 360
Easing: Easy in out
Event:
Element on screen
Step 4:
Duration: 3
Move x: 0 y: -250
Scale: 130
Opacity: 100
Rotate: 180
Easing: Elastic fin
Event:
Element on screen
Step 1:
Duration: 3
Move x: 417 y: 0
Scale: 300
Opacity: 100
Rotate: 360
Easing: Easy in out
Step 2:
Duration: 1
Move x: 0 y: 250
Scale: 20
Opacity: 50
Rotate: 0
Easing: Easy out
Step 3:
Duration: 5
Move x: -417 y: 0
Scale: 100
Opacity: 100
Rotate: 0
Easing: Linear
02
02
01
01
Step 1:
Duration: 1
Move x: 250 y: 0
Scale: 100
Opacity: 100
Rotate: 360
Easing: Linear
Event:
Element on screen
Made on
Tilda