css cubic-bezier()函数定义贝塞尔曲线缓动函数

分类:知识百科 日期: 点击:0

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()函数只能用于定义动画的缓动函数,不能用于定义其他效果。

标签:

版权声明

1. 本站所有素材,仅限学习交流,仅展示部分内容,如需查看完整内容,请下载原文件。
2. 会员在本站下载的所有素材,只拥有使用权,著作权归原作者所有。
3. 所有素材,未经合法授权,请勿用于商业用途,会员不得以任何形式发布、传播、复制、转售该素材,否则一律封号处理。
4. 如果素材损害你的权益请联系客服QQ:77594475 处理。