推荐一个缓动函数速查网站

在做CSS动画或者JavaScript动画时,缓动函数是很重要的,它就相当于是如下公式
 
[公式]
 
本质上是一个时间函数,由时间来决定位移、大小等外在显示。
 
在CSS内部有一些内置的animation-timing-function,比如ease-in-out、linear等,追求自定义的话可以指定cubic-bezier。
 
但是在JavaScript中没有办法了,只能自己来定义缓动函数了,这里介绍一个速查网站,能很方便地查到常用的缓动函数以及它们的详情。
 
缓动函数速查表
 
​easings.net/cn
 
在鼠标hover的时候还会有一个动画的快捷显示,点开某一个缓动函数可以查看详情,比如以easeInOutElastic为例
 
左侧部分显示具体的设置代码,右侧可以通过大小、位移、透明度跟linear缓动对比查看效果。

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/html/h64078.shtml

张贴在3