[分享]css3怎么实现曲线动画

CSS3 可以实现许多动画效果，其中曲线动画是其中一种较为常见的动画效果。在 CSS3 中，曲线动画可以通过 cubicbezier 函数来实现，下面就是一个使用 cubicbezier 函数实现的曲...

CSS3 可以实现许多动画效果，其中曲线动画是其中一种较为常见的动画效果。在 CSS3 中，曲线动画可以通过 cubic-bezier 函数来实现，下面就是一个使用 cubic-bezier 函数实现的曲线动画。

animation: curve 2s ease-in-out infinite;
@keyframes curve {
  0% { transform: translateX(0); }
  50% { transform: translateX(100px) translateY(-100px); }
  100% { transform: translateX(200px); }
} 

在上面的代码中，我们使用了 animation 属性定义了一个名为 curve 的动画，并通过 keyframes 关键字定义了动画的关键帧规则。

在 keyframes 规则中，我们使用了 transform 属性改变元素的位置，让元素沿着一条曲线运动。而 cubic-bezier 函数在上面的代码中没有写出来，它用来定义动画的运动状态，并通过 ease-in-out 来定义曲线运动的速度和缓动效果。

cubic-bezier(.42,.01,.22,.99); 

上面的代码就是一个 cubic-bezier 函数的例子，其中四个参数分别表示曲线的起点、控制点一、控制点二以及终点。通过调整这些参数，可以得到不同的曲线效果。

使用 cubic-bezier 函数可以轻松实现曲线动画效果，创造出更酷炫的动画效果，从而让你的网站变得更加生动有趣。