CSS летит и увеличивает логотип на изогнутом пути

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

HTML

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

CSS

.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);
}

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

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


animation css bezier cubic
person Mr.Paule54    schedule 07.10.2016    source источник
comment
переход... используется при изменении свойств элемента.... например, при наведении   -  person DaniP    schedule 07.10.2016
comment
У вас есть фрагмент или скрипт, с которым мы можем поиграть, чтобы решить вашу проблему?   -  person Simon Arnold    schedule 07.10.2016
comment
@DaniP Я просто ищу в Google. Может быть, эти кубики-безье НЕ ЯВЛЯЮТСЯ траекторией для объекта - это возможность определить скорость, непрозрачность и т.д. -> переход?   -  person Mr.Paule54    schedule 07.10.2016

Ответы (1)


arrow_upward
0
arrow_downward

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

Во-вторых, чтобы добиться желаемого, используйте свойство перехода матрицы CSS3 в сочетании с пользовательская функция анимации с обратным вызовом пользовательского шага. Либо так, либо настройте свойства CSS, такие как верх, лево, высота и ширина, непосредственно с помощью указанной функции анимации.

Удачи!

person Steven Leimberg    schedule 07.10.2016
comment
Спасибо, @steve, я только что нашел возможность работать с ключевыми кадрами code @keyframes animationFrames{ 0% {transform: translate(450px,-150px) scaleX(0.10) scaleY(0.10) ;} 100% {transform: translate(0px,0px) scaleX(1.00) scaleY(1.00) ;} } Просто попытайтесь получить своего рода кривую, но, конечно, это не кривая траектория. - person Mr.Paule54; 08.10.2016
comment
@ Mr.Paule54, пожалуйста, не публикуйте важную информацию в комментариях - отредактируйте их в своем вопросе, а затем оставьте комментарий со словами «спасибо», я обновил вопрос, но он все еще не совсем работает. Другие потенциальные ответы на вопросы должны быть в состоянии найти эту новую информацию =) - person Mike 'Pomax' Kamermans; 08.10.2016