首页 > 试题广场 >

下面使用 Animate-timing-function 定

[单选题]

下面使用 Animate-timing-function 定义的贝塞尔曲线，哪一个是先快后慢的（）

animation-timing-function :
cubic-bezier(.22, 1.23, .97, .89)

animation-timing-function :
cubic-bezier(1.23, .22, 97, .89)

animation-timing-function :
cubic-bezier(1.23, .97, .89, .22)

animation-timing-function ：
cubic-bezier(.22, .97, .89, 1.23)

查看正确选项

于指缝间慢慢流逝

①transition-timing-function属性

transition-timing-function属性指定切换效果的速度。

此属性允许一个过渡效果，以改变其持续时间的速度。

语法：transition-timing-function: cubic-bezier(n,n,n,n);

https://www.runoob.com/cssref/css3-pr-transition-timing-function.html

②cubic-bezier() 函数

贝塞尔曲线曲线由四个点 P0，P1，P2 和 P3 定义。P0 和 P3 是曲线的起点和终点。P0是（0,0）并且表示初始时间和初始状态，P3是（1,1）并且表示最终时间和最终状态。

P0：默认值 (0, 0) P1：动态取值 (x1, y1) P2：动态取值 (x2, y2) P3：默认值 (1, 1)

我们需要关注的是 P1 和 P2 两点的取值，而其中 X 轴的取值范围是 0 到 1，当取值超出范围时 cubic-bezier 将失效；Y 轴的取值没有规定，当然也毋须过大。

最直接的理解是，将以一条直线放在范围只有 1 的坐标轴中，并从中间拿出两个点来拉扯（X 轴的取值区间是 [0, 1]，Y 轴任意），最后形成的曲线就是动画的速度曲线。

cubic-bezier() 可用于 animation-timing-function 和 transition-timing-function 属性。

语法：cubic-bezier(x1,y1,x2,y2)

https://www.runoob.com/cssref/func-cubic-bezier.html

（个人理解可能有误）

③贝塞尔曲线的快慢

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

快慢由斜率k决定，k1=y1/x1,k2=y2/x2, k>0 则为快，k<0则为慢
图解 https://cubic-bezier.com/#.17,.67,.83,.67

发表于 2019-12-30 18:58:31 回复(4)

每天都要努力呀！

编辑于 2019-09-12 09:50:17 回复(2)

张成sai

这种题我是真不会

发表于 2019-10-09 00:35:58 回复(0)

我爱死自己这个***了

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]。

发表于 2019-08-16 22:10:12 回复(0)

初见呀

不是,就没人喷这个题离谱?

发表于 2021-04-23 07:38:03 回复(2)

Hayle

贝塞尔曲线：cubic-bezier(x1,y1,x2,y2)，快慢由斜率k决定，k1=y1/x1,k2=y2/x2, k>0 则为快，k<0则为慢

发表于 2021-04-15 17:16:16 回复(0)

牛客126512348号

面试问到了我也认了这种东西应该不会问的那么仔细了吧

发表于 2021-07-09 21:33:39 回复(0)

蒲公英想养花

贝塞尔曲线的快慢 cubic-bezier(x1,y1,x2,y2) 快慢由斜率k决定，k1=y1/x1,k2=y2/x2, k>0 则为快，k<0则为慢

发表于 2022-06-18 09:39:08 回复(0)

白纸201902271059673

看着这些小点对比速度好久才选对💩

发表于 2020-01-12 16:59:27 回复(0)

从此买买买

A应该是先快后慢再快吧，D才是先快后慢？

发表于 2019-08-17 12:46:24 回复(1)

6758

CSS animation-timing-function属性定义CSS动画在每一动画周期中执行的节奏。

cubic-bezier 为三次贝塞尔曲线
cubic-bezier(x1,y1,x2,y2)的参数为开始节点和结束节点的切线末尾对应的节点的坐标

所以，题目要求先快后慢，则说明，开始的斜率要大于1，即 y1 / x1 > 1 ==> y1 > x1, 排除 B C

结束节点切线的斜率小于1，即 y2/ x2 < 1 ==> y2 < x2, 排除 D

发表于 2022-09-05 12:35:45 回复(0)

南新CL

厉害了

发表于 2022-06-17 10:44:07 回复(0)

sword

看斜率

发表于 2021-11-04 14:47:02 回复(0)

jewishlei

https://www.runoob.com/try/try.php?filename=trycss3_animation-timing-function3

发表于 2020-03-03 03:19:53 回复(0)

安如水

cubic-bezier(.22,1.23,.97,.89)中的0.22，1.23为x1,x2。0.96,0.89为y1,y2。计算快慢x2-x1~~~~y2-y1因此是从0-1.01-1-0.08

编辑于 2019-09-06 11:12:13 回复(1)

提交观点

问题信息

系统工程师运维工程师 CSS 2019 360集团

来自：360公司-2019校...

上传者：小小

难度：

15条回答 1115收藏 5188浏览

下面使用 Animate-timing-function 定

问题信息

热门推荐

相关试题