css【详解】cubic-bezier()函数

朝阳39

已于 2024-07-10 11:20:12 修改

阅读量5.3k

点赞数 1

分类专栏： # 已归档链接 # CSS 文章标签： css html5

于 2021-10-12 21:02:42 首次发布

本文链接：https://blog.csdn.net/weixin_41192489/article/details/120732220

版权

已归档链接同时被 2 个专栏收录

283 篇文章 14 订阅

订阅专栏

CSS

149 篇文章 9 订阅

订阅专栏

cubic-bezier()函数是三次方贝塞尔曲线函数。所有三次方贝塞尔曲线都是由起点、终点和两个控制点组成，在SVG或者Canvas中，三次方贝塞尔曲线的所有控制点都是不固定的。但是在CSS的cubic-bezier()函数中，起点和终点的坐标是固定的，分别是(0,0)和(1,1)，因此，cubic-bezier()函数支持的参数值只有4个，代表了两个控制点的坐标，语法如下：

cubic-bezier(x1, y1, x2, y2)

其中坐标(x1,y1)表示控制点1的坐标，坐标(x2,y2)表示控制点2的坐标。

标准的cubic-bezier()函数值的取值范围是0～1，超出1时，可以实现回弹效果

.target {
    transition: 1s cubic-bezier(.16, .67, .28, 1.46);
}
.target.run {
    transform: translateX(200px);
}

常用缓动类型的贝塞尔曲线值

:root {
    --ease-in-quad: cubic-bezier(.55, .085, .68, .53);
    --ease-in-cubic: cubic-bezier(.55, .055, .675, .19);
    --ease-in-quart: cubic-bezier(.895, .03, .685, .22);
    --ease-in-quint: cubic-bezier(.755, .05, .855, .06);
    --ease-in-expo: cubic-bezier( .95, .05, .795, .035);
    --ease-in-circ: cubic-bezier( .6, .04, .98, .335);
    --ease-out-quad: cubic-bezier( .25, .46, .45, .94);
    --ease-out-cubic: cubic-bezier( .215, .61, .355, 1);
    --ease-out-quart: cubic-bezier( .165, .84, .44, 1);
    --ease-out-quint: cubic-bezier( .23, 1, .32, 1);
    --ease-out-expo: cubic-bezier(.19, 1, .22, 1); 
    --ease-out-circ: cubic-bezier(.075, .82, .165, 1); 
    --ease-in-out-quad: cubic-bezier(.455, .03, .515, .955);
    --ease-in-out-cubic: cubic-bezier(.645, .045, .355, 1);  
    --ease-in-out-quart: cubic-bezier(.77, 0, .175, 1); 
    --ease-in-out-quint: cubic-bezier(.86, 0, .07, 1);
    --ease-in-out-expo: cubic-bezier(l, 0, 0, 1); 
    --ease-in-out-circ: cubic-bezier(.785, .135, .15, .86);
}