CSS 在 flex 路径上飞行和放大 Logo

Question

我必须用 CSS 制作动画。一个标志基于 flex 路径或抛物线飞行并放大到前面。我画了一个小草图。 Logo 盯着右上角的小，飞翔并变大，并在左中心结束。 Sketch 我找到了很多关于 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);
}

这是(几次)尝试中的一次，但 Logo 不是动画的。此外，如果我理解它，那只是没有缩放的路径。 我的思维错误在哪里？

非常感谢和问候!

Answer 1

首先，cubic-bezier 是一个计时函数，而不是一个“路径”函数。它不会实现您所追求的目标。

其次，要完成您想要的，请使用 CSS3 matrix transition property连同a custom animation function with a custom step callback .或者，或者直接使用所述动画功能调整 CSS 属性，如顶部、左侧、高度和宽度。

祝你好运!