hooyantsing's Blog

P228_20_完整体验速率变化效果

字数统计: 81阅读时长: 1 min
2020/04/25

P228 20 完整体验速率变化效果

animation-timing-function

调整动画在不同时刻的快慢程度。

类比记忆:transition-timing-function

1
2
//默认ease
animation-timing-function: ease;

其他参数:

d60743d0291b8248e1512fdd7ca10c29.png

cubic-bezier

自定义贝塞尔曲线,自定义快慢程度。

调试网址: https://cubic-bezier.com

c33d74bf968b7300b264721dbfff69f0.png

1
animation-timing-function: cubic-bezier(.78,0,.18,1);
CATALOG