CSS - transition-timing-function 属性

CSS transition-timing-function 属性用于指定 CSS 过渡的速度曲线。它定义了如何计算转换开始和结束之间的中间值。

可能的值

<easing-function> - 每个<easing-function>定义了要与要转换的相关属性链接的缓动函数，如transition-property中所述。
ease − 默认值。缓慢开始，中间加速，最后减速。
ease-in - 缓慢开始并加速接近尾声。
ease-out - 快速启动并在结束时减速。
ease-in-out - 结合了易进和易出的特性。
linear − 以均匀速度过渡，等于 cubic-bezier（0.0， 0.0， 1.0， 1.0）。
step-start − 类似于 steps（1， jump-start）。
step-end − 类似于 steps（1， jump-end）。
cubic-bezier（p1， p2， p3， p4） - 允许您定义自己的三次贝塞尔函数。值必须介于 0 和 1 之间。
steps（ n， <jumpterm>） - 过渡可以分为 n 个停止点，每个停止点持续的时间相等。
jump-start − 表示左连续函数，表示过渡从第一次跳跃发生的点开始。
jump-end − 表示右连续函数，表示最终跳转发生在动画结束时。
jump-none − 两端均不发生跳跃。或者，将头寸保持在 0% 和 100% 标记，每个标记的持续时间为 1/n。
jump-both − 在 0% 和 100% 标记处暂停都会增加过渡时间的步骤。
start − 类似于 jump-start。
end − 类似于 jump-end。

适用于

语法

关键字值


transition-timing-function: ease;
transition-timing-function: ease-in;
transition-timing-function: ease-out;
transition-timing-function: ease-in-out;
transition-timing-function: linear;
transition-timing-function: step-start;
transition-timing-function: step-end;

函数值


transition-timing-function: steps(4, jump-end);
transition-timing-function: cubic-bezier(0.1, 0.7, 1, 0.1);

Steps Function 关键字


transition-timing-function: steps(4, jump-start);
transition-timing-function: steps(10, jump-end);
transition-timing-function: steps(20, jump-none);
transition-timing-function: steps(5, jump-both);
transition-timing-function: steps(6, start);
transition-timing-function: steps(8, end);

要记住的要点

从本质上讲，这允许您定义加速曲线，该曲线允许您在整个持续时间内改变过渡的速度。
加速曲线是通过使用<缓动函数>定义每个过渡属性来创建的。
在 CSS 过渡中使用多个缓动函数时，每个函数对应于 transition-property 指定的一个属性，充当 transition-property 列表。如果缓动函数小于过渡属性，则用户代理将重复值列表以计算每个属性的适当值。如果有更多函数，则会将其截断为适当的大小。CSS 声明在这两种情况下都有效。

CSS transition-timing-function - cubic-Bezier 示例

以下示例演示了如何使用具有不同函数值的 transition-timing-function 属性 -


<html>
<head>
<style>
	 	div {
	 	 	 width: 120px;
	 	 	 padding: 10px;
	 	 	 transition-property: all;	
	 	 	 background-color: yellow;
	 	 	 transition-duration: 3s;
	 	 	 margin: 5px;
	 	}
	 	div:hover {
	 	 	 background-color: green;
	 	 	 padding-right: 200px;
	 	 	 color: white;
	 	}
	 	.box1 {
	 	 	 transition-timing-function: ease;
	 	}
	 	.box2 {
	 	 	 transition-timing-function: ease-in;
	 	}
	 	.box3 {
	 	 	 transition-timing-function: ease-out;
	 	}
	 	.box4 {
	 	 	 transition-timing-function: ease-in-out;
	 	}
	 	.box5 {
	 	 	 transition-timing-function: linear;
	 	}
	 	.box6 {
	 	 	 transition-timing-function: cubic-bezier(0.2, -2, 0.8, 2);
	 	}
</style>
</head>
<body>
	 	<div class="box1">ease</div>
	 	<div class="box2">ease-in</div>
	 	<div class="box3">ease-out</div>
	 	<div class="box4">ease-in-out</div>
	 	<div class="box5">linear</div>
	 	<div class="box6">cubic-bezier(0.2, -2, 0.8, 2)</div>
</body>
</html>

CSS transition-timing-function - 步骤示例

以下示例演示了将 transition-timing-function 属性与不同的基于步长的计时函数一起使用 -


<html>
<head>
<style>
	 	div {
	 	 	 width: 140px;
	 	 	 padding: 10px;
	 	 	 transition-property: all;	
	 	 	 background-color: yellow;
	 	 	 transition-duration: 3s;
	 	 	 margin: 5px;
	 	}
	 	div:hover {
	 	 	 background-color: green;
	 	 	 padding-right: 200px;
	 	 	 color: white;
	 	}
	 	.box1 {
	 	 	 transition-timing-function: steps(4, jump-start);
	 	}
	 	.box2 {
	 	 	 transition-timing-function: steps(4, jump-end);
	 	}
	 	.box3 {
	 	 	 transition-timing-function: steps(4, jump-none);
	 	}
	 	.box4 {
	 	 	 transition-timing-function: steps(4, jump-both);
	 	}
	 	.box5 {
	 	 	 transition-timing-function: step-start;
	 	}
	 	.box6 {
	 	 	 transition-timing-function: step-end;
	 	}
</style>
</head>
<body>
	 	<div class="box1">steps(4, jump-start)</div>
	 	<div class="box2">steps(4, jump-end)</div>
	 	<div class="box3">steps(4, jump-none)</div>
	 	<div class="box4">steps(4, jump-both)</div>
	 	<div class="box5">step-start</div>
	 	<div class="box6">step-end</div>
</body>
</html>

打印本页