如何使用CSS函数创建高级动画？

1. 什么是贝塞尔曲线？
• 什么是缓动函数？
• 线性曲线
• 二次贝塞尔曲线
• 三次贝塞尔曲线
2. 叠加动画
3. 创建过山车
• 了解动画
• 滑动部分
• 添加水平空间
• 循环部分
• 循环本身
• 添加水平空间
4. 总结

作为前端开发人员，网站上微妙的细节变化通常比别人会更关注。我一直注意到的一件事是网站上的动画的流畅性。动画对于用户体验来说是非常好的，有时我们可以一些有趣的动画来留住用户。

创建高级动画听起来是一个很难的话题，但好消息是，在 CSS 中，可以将多个简单的动画相互叠加，以创建一个更复杂的动画

在本文中，我们会学习如下几点：

• 什么是贝塞尔曲线，以及如何用一行 CSS 来创建一个 “复杂”的动画
• 如何将动画相互叠加以创建一个高级动画
• 如何通过应用上面学到的两点来创建一个过山车动画

什么是贝塞尔曲线？

CSS 中的 cubic-bezier 函数是一个缓动函数，可以让我们完全控制动画在时间上的表现。下面是官方的定义：

贝塞尔缓动函数是一种由四个实数定义的缓和函数，指定了贝塞尔曲线的两个控制点P1和P2，其端点P0和P3分别固定在（0, 0）和（1, 1）。P1和P2的x坐标被限制在[0, 1]范围内。

添加水平空间

快完成了，最后 只需要在动画之后沿着x轴移动球，这样球就不会像上图中那样在循环之后完全停止。

关键帧:

@keyframes x3 {
  to {
    left: 70vw;
  }
}

添加到 animation 中：

animation: x 4s linear forwards,
    y 4s cubic-bezier(0.55, 0, 0.2, -800) forwards, x2 0.5s linear forwards,
    pointOfCircle 0s linear forwards, loop 3s linear forwards,
    x3 2s linear forwards;

加上适当的延迟，这里是7.5s:

animation-delay: 0s, 0s, 4s, 4.5s, 4.5s, 7.5s;

点击预览

总结

以上就是我们介绍了如何结合多个关键帧来创建一个复杂的动画路径。我们还介绍了贝塞尔以及如何使用它们来创建你自己的缓动函数。建议大家自己多多动手，才能更好的掌握 css 动画。