在做CSS动画或者JavaScript动画时，缓动函数是很重要的，它就相当于是如下公式

 

[公式]

 

本质上是一个时间函数，由时间来决定位移、大小等外在显示。

 

在CSS内部有一些内置的animation-timing-function，比如ease-in-out、linear等，追求自定义的话可以指定cubic-bezier。

 

但是在JavaScript中没有办法了，只能自己来定义缓动函数了，这里介绍一个速查网站，能很方便地查到常用的缓动函数以及它们的详情。

 

缓动函数速查表

 

​easings.net/cn

 

在鼠标hover的时候还会有一个动画的快捷显示，点开某一个缓动函数可以查看详情，比如以easeInOutElastic为例

 

左侧部分显示具体的设置代码，右侧可以通过大小、位移、透明度跟linear缓动对比查看效果。