css cubic-bezier()函数
css cubic-bezier()函数是用来定义贝塞尔曲线缓动函数的,它可以指定一个动画的速度曲线,从而让动画更加平滑自然。
使用方法
css cubic-bezier()函数有四个参数,分别是x1、y1、x2、y2,每个参数的取值范围是0-1,它们分别代表贝塞尔曲线的起点和终点的横纵坐标,以及曲线的两个控制点的横纵坐标。
cubic-bezier(x1, y1, x2, y2)
比如,如果想要定义一个从慢到快再到慢的缓动函数,可以这样写:
cubic-bezier(0.25, 0.1, 0.25, 1)
如果想要定义一个快速开始,中间加速,减速的缓动函数,可以这样写:
cubic-bezier(0.42, 0, 1, 1)
还有一些特殊的缓动函数,可以使用css提供的关键字,比如:
- ease:默认缓动函数,从慢到快再到慢
- ease-in:从慢到快
- ease-out:从快到慢
- ease-in-out:快速开始,中间加速,减速
- linear:匀速运动
要注意css cubic-bezier()函数只能用于定义动画的缓动函数,不能用于定义其他效果。