css3动画animation-timing-function中的cubic-bezier(n,n,n,n)
transition-timing-function属性指定切换效果的速度。
transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);
cubic-bezier即为贝兹曲线中的绘制方法。图上有四点,P0-3,其中P0、P3是默认的点,对应了[0,0], [1,1]。而剩下的P1、P2两点则是我们通过cubic-bezier()自定义的。cubic-bezier(x1, y1, x2, y2) 为自定义,x1,x2,y1,y2的值范围在[0, 1]。
预留的几个特效:
1 ease: cubic-bezier(0.25, 0.1, 0.25, 1.0) 2 linear: cubic-bezier(0.0, 0.0, 1.0, 1.0) 3 ease-in: cubic-bezier(0.42, 0, 1.0, 1.0) 4 ease-out: cubic-bezier(0, 0, 0.58, 1.0) 5 ease-in-out: cubic-bezier(0.42, 0, 0.58, 1.0)
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步