Copy of Тренажер по уроку element/block on screen

Тренажёр

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

01

Step 1:

Duration: 1
Move x: 250 y: 0
Scale: 100
Opacity: 100
Rotate: 360
Easing: Linear

Event:

Element on screen