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

Пролистни до элементов

Element on screen

Block on screen

движение круга по траектории квадрата с изменением цвета в шагах

Пробую остальные анимации

Element on screen

анимация сверху вниз с разным зацикливанием (Loop)

Пробую остальные анимации

Element 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