css3 animation 中的贝塞尔曲线(cubic-bezier)

html-css017

css3 animation 中的贝塞尔曲线(cubic-bezier),第1张

表面上看,需要设置两个点,实际上包含了两个掩藏点 起始点 (0,0) 和 终点 (1,1) 。所以实际上应该是以下效果。

可以看出,贝塞尔曲线是由4个点构成的一条线,可能是任意形状的线。下面给出一些线型例子来说明。

这种运动模式下 x1 ∈ [0, 0.5], 且 y1 >x1 且 x2 ∈ [0.5, 1] 且 y2 <x2 。此时的运动轨迹习惯上称之为 ease ,下面给出一个夸张点的图像:

这种模式下,x1 ∈ [0, 1] 且 y1 <x1 且 x2 ∈ [0, 1] 且 y2 <x2 。 此时的运动轨迹成为 ease-in ,下面是示意图:

这种模式是与 3 的情况相反,所以 x ∈ [0, 1] 且 y >x 时,这里两个点都要符合这种情况才能实现。习惯上称这种情况为 ease-out ,下面给出示意图:

以上的四种情况中,常见的 ease-in-out 与 ease 的曲线一致,只是 ease-in-out 慢的部分更慢,快的部分更快。

可以用过 这个网站 观察贝赛尔曲线的运动轨迹。

另外,本文参考自

@keyframes drop

0%

transform: translate(0,0) rotate3d(0,1,0,0deg)

33%

transform: translate(-20px,245px) rotate3d(0,1,0,-60deg)

66%

transform: translate(20px,490px) rotate3d(0,1,0,60deg)

100%

transform: translate(0,736px) rotate3d(0,1,0,0deg)

@keyframes drop2

0%

transform: translate(0,0) rotate3d(1,0,0,0deg)

33%

transform: translate(20px,245px) rotate3d(1,0,0,60deg)

66%

transform: translate(-20px,490px) rotate3d(1,0,0,-60deg)

100%

transform: translate(0,736px) rotate3d(1,0,0,0deg)