CSS - animation-timing-function 属性_CSS 菜鸟教程

CSS animation-timing-function 属性确定动画的速度曲线，该曲线确定动画从一组 CSS 样式过渡到另一组 CSS 样式所花费的时间。它决定了动画的节奏。

语法

animation-timing-function: linear | ease | ease-in | ease-out | ease-in-out | step-start | step-end | steps(int, start | end) | cubic-bezier(n, n, n, n) | initial | inherit;

属性值

值	描述
linear	动画从头到尾都具有相同的速度。
ease	动画开始缓慢，然后加快速度，然后再次减慢。违约。
ease-in	动画开始缓慢，然后加快速度。
ease-out	动画播放正常，但最后会减慢速度。
ease-in-out	动画开始缓慢，然后加快速度，然后再次减慢。
step-start	动画在关键帧动画开始时直接跳转到结束状态。
step-end	动画在关键帧动画结束时跳转到结束状态。
steps(int,start\|end)	指定了一个步进函数，其步数与开始或结束的位置相符（例如，steps（6， end））。
cubic-bezier(n,n,n,n)	使用三次-贝塞尔曲线（例如，cubic-bezier（0.25， 0.1， 0.25， 1.0））定义自定义定时函数。可能的值为 0 到 1。.
initial	将属性设置为其默认值。
inherit	从其父元素继承属性。

CSS 动画计时函数属性示例

以下示例使用不同的值和函数说明 animation-timing-function 属性。

在整个过程中设置相同的动画速度

为了让动画从动画开始到结束具有相同的速度，我们使用线性值。在以下示例中，linear 值已用于 animation-timing-function 属性。

<!DOCTYPE html>
<html>
<head>
	 	 <style>
	 	 	 	 h3 {
	 	 	 	 	 	 width: 200px;
	 	 	 	 	 	 text-align: center;
	 	 	 	 	 	 animation-name: text;
	 	 	 	 	 	 animation-duration: 4s;
	 	 	 	 	 	 animation-iteration-count: infinite;
	 	 	 	 	 	 border: 2px solid black;
	 	 	 	 }

	 	 	 	 #linear {
	 	 	 	 	 	 animation-timing-function: linear;
	 	 	 	 }

	 	 	 	 @keyframes text {
	 	 	 	 	 	 from {
	 	 	 	 	 	 	 	 margin-left: 35%;
	 	 	 	 	 	 }

	 	 	 	 	 	 to {
	 	 	 	 	 	 	 	 margin-left: 0%;
	 	 	 	 	 	 }
	 	 	 	 }
	 	 </style>
</head>

<body>
	 	 <h2>CSS animation-timing-function property </h2>
	 	 <h3 id="linear">Linear value</h3>
</body>

</html>

设置动画的慢开始和慢结束

为了让动画缓慢开始，然后加快速度，然后再次减慢速度，我们使用 ease 值。在以下示例中，ease 值已用于 animation-timing-function 属性。

<!DOCTYPE html>
<html>
<head>
	 	 <style>
	 	 	 	 h3 {
	 	 	 	 	 	 width: 200px;
	 	 	 	 	 	 text-align: center;
	 	 	 	 	 	 animation-name: text;
	 	 	 	 	 	 animation-duration: 4s;
	 	 	 	 	 	 animation-iteration-count: infinite;
	 	 	 	 	 	 border: 2px solid black;
	 	 	 	 }

	 	 	 	 #linear {
	 	 	 	 	 	 animation-timing-function: ease;
	 	 	 	 }

	 	 	 	 @keyframes text {
	 	 	 	 	 	 from {
	 	 	 	 	 	 	 	 margin-left: 35%;
	 	 	 	 	 	 }

	 	 	 	 	 	 to {
	 	 	 	 	 	 	 	 margin-left: 0%;
	 	 	 	 	 	 }
	 	 	 	 }
	 	 </style>
</head>

<body>
	 	 <h2>CSS animation-timing-function property </h2>
	 	 <h3 id="linear">Ease value</h3>
</body>

</html>

设置动画的慢启动

为了让动画缓慢开始，然后加快速度，我们使用缓入值。在以下示例中，缓入值已用于 animation-timing-function 属性。

<!DOCTYPE html>
<html>
<head>
	 	 <style>
	 	 	 	 h3 {
	 	 	 	 	 	 width: 200px;
	 	 	 	 	 	 text-align: center;
	 	 	 	 	 	 animation-name: text;
	 	 	 	 	 	 animation-duration: 4s;
	 	 	 	 	 	 animation-iteration-count: infinite;
	 	 	 	 	 	 border: 2px solid black;
	 	 	 	 }

	 	 	 	 #linear {
	 	 	 	 	 	 animation-timing-function: ease-in;
	 	 	 	 }

	 	 	 	 @keyframes text {
	 	 	 	 	 	 from {
	 	 	 	 	 	 	 	 margin-left: 35%;
	 	 	 	 	 	 }

	 	 	 	 	 	 to {
	 	 	 	 	 	 	 	 margin-left: 0%;
	 	 	 	 	 	 }
	 	 	 	 }
	 	 </style>
</head>

<body>
	 	 <h2>CSS animation-timing-function property </h2>
	 	 <h3 id="linear">Ease-in value</h3>
</body>

</html>

为动画设置慢结束

为了让动画以正常速度播放，但在结束时减慢速度，我们使用缓出值。在以下示例中，ease-out 值已用于 animation-timing-function 属性。

<!DOCTYPE html>
<html>
<head>
	 	 <style>
	 	 	 	 h3 {
	 	 	 	 	 	 width: 200px;
	 	 	 	 	 	 text-align: center;
	 	 	 	 	 	 animation-name: text;
	 	 	 	 	 	 animation-duration: 4s;
	 	 	 	 	 	 animation-iteration-count: infinite;
	 	 	 	 	 	 border: 2px solid black;
	 	 	 	 }

	 	 	 	 #linear {
	 	 	 	 	 	 animation-timing-function: ease-out;
	 	 	 	 }

	 	 	 	 @keyframes text {
	 	 	 	 	 	 from {
	 	 	 	 	 	 	 	 margin-left: 35%;
	 	 	 	 	 	 }

	 	 	 	 	 	 to {
	 	 	 	 	 	 	 	 margin-left: 0%;
	 	 	 	 	 	 }
	 	 	 	 }
	 	 </style>
</head>

<body>
	 	 <h2>CSS animation-timing-function property </h2>
	 	 <h3 id="linear">Ease-out value</h3>
</body>

</html>

设置动画的慢开始和慢结束

为了让动画慢慢开始，然后选择一些速度，然后在结束时减慢速度，我们还可以使用缓入和缓出值的组合，即缓入和缓出值，即缓入和缓出值。在以下示例中，ease-in-out 值已用于 animation-timing-function 属性。

<!DOCTYPE html>
<html>
<head>
	 	 <style>
	 	 	 	 h3 {
	 	 	 	 	 	 width: 200px;
	 	 	 	 	 	 text-align: center;
	 	 	 	 	 	 animation-name: text;
	 	 	 	 	 	 animation-duration: 4s;
	 	 	 	 	 	 animation-iteration-count: infinite;
	 	 	 	 	 	 border: 2px solid black;
	 	 	 	 }

	 	 	 	 #linear {
	 	 	 	 	 	 animation-timing-function: ease-in-out;
	 	 	 	 }

	 	 	 	 @keyframes text {
	 	 	 	 	 	 from {
	 	 	 	 	 	 	 	 margin-left: 35%;
	 	 	 	 	 	 }

	 	 	 	 	 	 to {
	 	 	 	 	 	 	 	 margin-left: 0%;
	 	 	 	 	 	 }
	 	 	 	 }
	 	 </style>
</head>

<body>
	 	 <h2>CSS animation-timing-function property </h2>
	 	 <h3 id="linear">Ease-in-out value</h3>
</body>

</html>

设置突然跳转到“开始”

为了让动画在动画的关键帧开始时直接达到结束状态，从而导致突然的变化，我们使用 step-start 值。在以下示例中，step-start 值已用于 animation-timing-function 属性。

	 	 	
<!DOCTYPE html>
<html>

<head>
	 	 <style>
	 	 	 	 .box {
	 	 	 	 	 	 width: 100px;
	 	 	 	 	 	 height: 50px;
	 	 	 	 	 	 border: 2px solid black;
	 	 	 	 	 	 display: flex;
	 	 	 	 	 	 justify-content: center;
	 	 	 	 	 	 animation: move 6s infinite;
	 	 	 	 }

	 	 	 	 .step-start {
	 	 	 	 	 	 animation-timing-function: step-start;
	 	 	 	 }

	 	 	 	 @keyframes move {
	 	 	 	 	 	 0%,
	 	 	 	 	 	 100% {
	 	 	 	 	 	 	 	 transform: translateX(0);
	 	 	 	 	 	 }
	 	 	 	 	 	 50% {
	 	 	 	 	 	 	 	 transform: translateX(250px);
	 	 	 	 	 	 }
	 	 	 	 }
	 	 </style>
</head>

<body>
	 	 <h2>CSS animation-timing-function property</h2>
	 	 <div class="box step-start">Step-start</div>
</body>

</html>

设置突然跳转到结束

为了让动画在动画的关键帧结束时直接达到结束状态，从而导致突然的变化，我们使用 step-end 值。在以下示例中，step-end 值已用于 animation-timing-function 属性。

	 	 	
<!DOCTYPE html>
<html>

<head>
	 	 <style>
	 	 	 	 .box {
	 	 	 	 	 	 width: 100px;
	 	 	 	 	 	 height: 50px;
	 	 	 	 	 	 border: 2px solid black;
	 	 	 	 	 	 display: flex;
	 	 	 	 	 	 justify-content: center;
	 	 	 	 	 	 animation: move 6s infinite;
	 	 	 	 }

	 	 	 	 .step-start {
	 	 	 	 	 	 animation-timing-function: step-end;
	 	 	 	 }

	 	 	 	 @keyframes move {
	 	 	 	 	 	 0%,
	 	 	 	 	 	 100% {
	 	 	 	 	 	 	 	 transform: translateX(0);
	 	 	 	 	 	 }
	 	 	 	 	 	 50% {
	 	 	 	 	 	 	 	 transform: translateX(250px);
	 	 	 	 	 	 }
	 	 	 	 }
	 	 </style>
</head>

<body>
	 	 <h2>CSS animation-timing-function property</h2>
	 	 <div class="box step-start">Step-end</div>
</body>

</html>

设置阶梯动画

为了让动画在步长间隔内移动，我们使用 steps（）函数。它接受两个参数，第一个是整数，第二个是“start”或“end”，指定值在间隔内发生变化的点。在以下示例中，整数为 4，第二个参数为 start。

	 	 	
<!DOCTYPE html>
<html>

<head>
	 	 <style>
	 	 	 	 .box {
	 	 	 	 	 	 width: 100px;
	 	 	 	 	 	 height: 50px;
	 	 	 	 	 	 border: 2px solid black;
	 	 	 	 	 	 display: flex;
	 	 	 	 	 	 justify-content: center;
	 	 	 	 	 	 animation: move 6s infinite;
	 	 	 	 }

	 	 	 	 .step-start {
	 	 	 	 	 	 animation-timing-function: steps(4,start);
	 	 	 	 }

	 	 	 	 @keyframes move {
	 	 	 	 	 	 0%,
	 	 	 	 	 	 100% {
	 	 	 	 	 	 	 	 transform: translateX(0);
	 	 	 	 	 	 }
	 	 	 	 	 	 50% {
	 	 	 	 	 	 	 	 transform: translateX(250px);
	 	 	 	 	 	 }
	 	 	 	 }
	 	 </style>
</head>

<body>
	 	 <h2>CSS animation-timing-function property</h2>
	 	 <div class="box step-start">Steps(4,start)</div>
</body>

</html>

设置变速动画

为了让动画以可变速度进行，我们使用 custom-beizer（）函数。该函数表示一条三次贝塞尔曲线，由四个点P0，P1，P2，P3定义：P0（开始）和P3（结束）。在以下示例中，函数中使用了 0.1、0.7、1.0 和 0.1 值。

<!DOCTYPE html>
<html>

<head>
	 	 <style>
	 	 	 	 .box {
	 	 	 	 	 	 width: 100px;
	 	 	 	 	 	 height: 50px;
	 	 	 	 	 	 border: 2px solid black;
	 	 	 	 	 	 display: flex;
	 	 	 	 	 	 justify-content: center;
	 	 	 	 	 	 align-items: center;
	 	 	 	 	 	 animation: move 6s infinite;
	 	 	 	 }

	 	 	 	 .cubic {
	 	 	 	 	 	 animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
	 	 	 	 }

	 	 	 	 @keyframes move {
	 	 	 	 	 	 0%,100% {
	 	 	 	 	 	 	 	 transform: translateX(0);
	 	 	 	 	 	 }
	 	 	 	 	 	 50% {
	 	 	 	 	 	 	 	 transform: translateX(250px);
	 	 	 	 	 	 }
	 	 	 	 	 		
	 	 	 	 }
	 	 </style>
</head>

<body>
	 	 <h2>CSS animation-timing-function property</h2>
	 	 <div class="box cubic">Cubic Beizer</div>
</body>

</html>

支持的浏览器

属性
animation-timing-function	43.0	10.0	16.0	9.0	30.0

<< CSS - animation-play-state 属性 CSS - aspect-ratio 属性 >>