CSS cubic-bezier()函数
-
定义和用法
cubic-bezier()函数定义了Cubic Bezier曲线。Cubic Bezier曲线由四个点P0,P1,P2和P3定义。P0和P3是曲线的起点和终点,在CSS中,这些点是固定的,因为坐标是比率。P0是(0,0)并且表示初始时间和初始状态,P3是(1,1)并且表示最终时间和最终状态。cubic-bezier()函数可以与animation-timing-function属性和transition-timing-function属性一起使用。特征 说明 CSS版本 CSS3 -
浏览器支持
表中的数字指定了完全支持该属性的第一个浏览器版本。数字后跟-ms-, -webkit-,-moz-或-o-指定使用前缀的第一个版本。函数 IE/Edge Chrome FireFox Safari Opera 函数名称 cubic-bezier() 10.04.04.03.110.5 -
CSS语法
cubic-bezier(x1,y1,x2,y2)
值 描述 x1,y1,x2,y2 必需的。 数值。 x1和x2必须是0到1之间的数字 -
实例
从开始到结束的可变速度的过渡效果:
尝试一下div { width: 100px; height: 100px; background: red; transition: width 2s; transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1); }