css - 弯曲路径上的 CSS 飞行和放大徽标

Question

我必须用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);
}

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

非常感谢和问候！

Answer 1

首先，三次贝塞尔曲线是一个计时函数，而不是一个“路径”函数。它不会完成你所追求的。

其次，要完成您想要的，请将CSS3 矩阵转换属性与带有自定义步骤回调的自定义动画函数结合使用。要么这样，要么直接使用所述动画功能调整 CSS 属性，如顶部、左侧、高度和宽度。

祝你好运！