CSS летать и увеличивать логотип на кривой пути

Question

Мне нужно сделать анимацию с помощью css. Логотип, летающий и расширяющийся в фронт, основан на искривленном пути или параболе. Я сделал небольшой рисунок. Логотип смотрит в малый верхний правый, летает и становится больше и заканчивается левым центром. Sketch Я нашел много информации о кубических безье и кубических безье редакторах, но, к сожалению, я не могу этого понять.

HTML-

<div class="animation"><img src="logo.jpg"></div> 

устанавливаемыми сотовыми

.animation { 
    transition: all 500ms cubic-bezier(0.725, -0.385, 0.970, 0.465); 
    transition-timing-function: cubic-bezier(0.725, -0.385, 0.970, 0.465); 
} 

Это был один (из нескольких) Trys но логотип не анимированные. Кроме того, если я это понимаю, это только путь без масштабирования. Где моя ошибка мышления?

Большое спасибо & привет!

Answer 1

Во-первых, кубический-безье является функцией синхронизации, а не функцией «пути». Это не будет сделано для вас.

Во-вторых, чтобы выполнить то, что вы хотите, используйте CSS3 matrix transition property совместно с a custom animation function with a custom step callback. Либо это, либо отрегулируйте свойства CSS, такие как верх, левый, высота и ширина, непосредственно с указанной функцией анимации.

Удачи вам!