首先来看一看我之前写的一个CSS轮播动画效果，为了让切换时动画的过渡更加的平滑我在animation-timing-function属性中并没有使用CSS提供的各种关键词，而使用了cubic-bezier（贝塞尔）函数。
贝塞尔函数乍一看会让人困惑摸不着头脑，但如果使用得当，它可以为动画的用户体验增添一种更棒的感觉。
在构建这个轮播动画的时候，我意识到当我给一页添加了显示的贝塞尔函数时，它前一页隐藏的贝塞尔函数则是反向的。我觉得我们分享这篇文章的内容是非常值得的，因为创建一个贝塞尔曲线并反转它可能看起来很棘手，但实际上非常的简单。
了解基础的easing
首先，Easing这个词用来描述元素动画在时间线上的加速与减速节奏。我们可以将其绘制成一个图表，其中x轴是时间，y轴是动画的进度。linear是没有加速或减速（一直以相同的速度移动）的图形，表现在图上就是一条直线：
非线性的Easing会让动画更自然、更逼真。我们可以对CSS中的transition和animation应用各种的easing，我们可以将这些值设置在transition-timing-function或者animation-timing-function属性上。总共有五个关键字可以设置：
linear – 上面已经介绍了
ease-in – 动画开始时很慢，并随着它的进行而加速。
ease-out – 动画开始很快，最后减速。
ease-in-out – 动画开始缓慢，中间加速，最后减速。
ease – 默认值，与ease-in-out的动画过程相反。
了解cubic-bezier
如果上面介绍的关键字值都不适合我们的动画，我们可以使用cubic-bezier贝塞尔函数创建自定义的曲线。下面是一个例子：
.my-element {
animation-name: slide;
animation-duration: 3s;
animation-timing-function: cubic-bezier(0.45, 0.25, 0.60, 0.95);
}我们可以将这些属性简写为一个，如下所示：
.my-element {
animation: slide 3s cubic-bezier(0.45, 0.25, 0.60, 0.95);
}你会注意到cubic-bezier贝塞尔函数有四个值。这四个值是绘制曲线所需的两对坐标。这些坐标代表什么意思呢？如果你使用过Illustrator，那么控制曲线大小和方向的向量点对你来说就会很熟悉。这就是我们用cubic-bezier贝塞尔函数绘制曲线所必须的点。
我们并不需要知道贝塞尔曲线背后的所有数学知识。因为有大佬为我们创建了方便的工具，例如LeaVerou的cubic-bezier.com，这个网站中我们可以可视化的创建一条贝塞尔曲线并复制它的坐标点值。我的轮播效果的贝塞尔曲线就是用这个工具创建的，它看起来是这样的：
