вернуться к уроку

Анимировать самолёт с перелётом (CSS)

важность: 5

Модифицируйте решение предыдущей задачи Анимировать самолёт (CSS) , чтобы в процессе анимации изображение выросло больше своего стандартного размера 400x240px («выпрыгнуло»), а затем вернулось к нему.

Должно получиться, как в примере ниже (клик на самолёт):

В качестве исходного кода возьмите решение прошлой задачи.

Для такой анимации необходимо подобрать правильную кривую Безье. Для того чтобы самолёт «выпрыгнул», она должна иметь y>1 на одном из участков.

Например, мы можем указать y>1 для обеих контрольных точек: cubic-bezier(0.25, 1.5, 0.75, 1.5).

График кривой Безье:

Открыть решение в песочнице.