Анимировать самолёт с перелётом (CSS)
важность: 5
Модифицируйте решение предыдущей задачи Анимировать самолёт (CSS) , чтобы в процессе анимации изображение выросло больше своего стандартного размера 400x240px («выпрыгнуло»), а затем вернулось к нему.
Должно получиться, как в примере ниже (клик на самолёт):
В качестве исходного кода возьмите решение прошлой задачи.
Для такой анимации необходимо подобрать правильную кривую Безье. Для того чтобы самолёт «выпрыгнул», она должна иметь y>1
на одном из участков.
Например, мы можем указать y>1
для обеих контрольных точек: cubic-bezier(0.25, 1.5, 0.75, 1.5)
.
График кривой Безье: