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

#css #animation #bezier #cubic

#css #Анимация #безье #кубический

Вопрос:

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

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

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

Большое спасибо и с уважением!

1. переход… используется при изменении свойств элемента …. например, при наведении курсора мыши

2. У вас есть фрагмент или скрипка, где мы можем поиграть с ним, чтобы испытать вашу проблему?

3. @DaniP Я просто ищу в Google. Может ли быть так, что эти cubic-bezier — ЭТО НЕ путь для объекта — это возможность определить скорость, непрозрачность и т. Д. -> Переход?

Ответ №1:

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

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

Удачи!

1. Спасибо @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) ;} } , просто попытайтесь получить вид кривой, но, конечно, это не изогнутый контур.

2. @Mr.Paule54 пожалуйста, не публикуйте важную информацию в комментариях — отредактируйте их в своем вопросе, а затем оставьте комментарий со словами «спасибо, я обновил вопрос, но он все еще не совсем работает». Другие потенциальные участники, отвечающие на вопросы, должны иметь возможность найти эту новую информацию =)