CSS飞行和扩大标志在弯曲的路径

Question

我必须用css制作动画。以曲线或抛物线为基础飞向前方并扩大的标志。我画了一个小草图。标志开始小的右上角，飞行和越来越大，是结束左中心。草图我发现了很多关于立方bezier和立方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);
}

这是一个(几个)尝试，但标志不是动画。另外，如果我理解的话，这只是没有缩放的路径。我的思维错误在哪里?

谢谢你&的问候!

Answer 1

首先，cubic-bezier是一个计时函数，而不是"路径"函数。它不会实现你想要的。

第二，要完成您想要的，使用CSS3矩阵过渡属性与自定义动画函数和自定义步骤回调相结合。或者直接使用上述动画函数调整CSS属性，如top、left、height和width。

祝你好运!