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

Question

我必须用css制作动画。基于弯曲路径或抛物线飞行并扩展到前部的徽标。我做了一个小草图。 徽标盯着小右上方，飞得越来越大，越过左中心。 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);
}

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

非常感谢＆amp;问候！

Answer 1

首先，cubic-bezier是一个计时功能，而不是＆＃34;路径＆＃34;功能。它无法实现你所追求的目标。

其次，要实现您的目标，请将CSS3 matrix transition property与a custom animation function with a custom step callback结合使用。或者直接使用所述动画功能调整顶部，左侧，高度和宽度等CSS属性。

祝你好运！