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 |
