css的animation-timing-function属性用于定义动画在每一段周期内的速度变化规律，也就是我们常说的动画曲线，它决定了动画是匀速运动、先快后慢还是先慢后快，是优化动画自然度的核心属性之一。
animation-timing-function的常用内置取值
css为该属性提供了多个内置的曲线取值，开发者可以直接使用，不需要手动计算参数，常见的内置取值如下：
- ease：默认值，动画先慢后快再慢，符合大多数自然运动的规律
- linear：匀速运动，整个动画过程速度保持一致
- ease-in：动画开始时慢，之后逐渐加快
- ease-out：动画开始时快，之后逐渐减慢
- ease-in-out：动画开始和结束时都慢，中间过程快
- step-start：动画跳转到每一段的结束状态，没有过渡效果
- step-end：动画保持每一段的开始状态，直到该段结束再跳转
内置取值的效果对比示例
我们可以通过一个方块水平移动的动画来对比不同取值的效果差异，代码如下：
/* 基础动画定义 */
@keyframes move {
from {
transform: translateX(0);
}
to {
transform: translateX(400px);
}
}
/* 不同曲线的动画类 */
.ease {
animation-timing-function: ease;
}
.linear {
animation-timing-function: linear;
}
.ease-in {
animation-timing-function: ease-in;
}
.ease-out {
animation-timing-function: ease-out;
}
<div class="box ease">ease</div> <div class="box linear">linear</div> <div class="box ease-in">ease-in</div> <div class="box ease-out">ease-out</div>
上述代码中四个方块的动画时长和移动距离完全一致，仅曲线不同，运行后就能直观看到不同曲线的速度变化差异。
自定义贝塞尔曲线cubic-bezier()
如果内置曲线无法满足需求，我们可以使用cubic-bezier()函数自定义贝塞尔曲线，该函数接收四个参数，分别是两个控制点的x和y坐标，取值范围是0到1之间，语法格式如下：
/* 自定义一个先极快后极慢的曲线 */
.custom-curve {
animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
}
其中第一个参数是第一个控制点的x坐标，第二个是第一个控制点的y坐标，第三个是第二个控制点的x坐标，第四个是第二个控制点的y坐标。我们可以通过在线贝塞尔曲线工具调整参数，找到符合需求的曲线后直接复制到代码中即可。
steps()逐帧动画的使用
除了贝塞尔曲线，我们还可以使用steps()函数制作逐帧动画，该函数接收两个参数，第一个是帧数，第二个是可选参数，取值为start或end，默认是end，示例如下：
/* 制作一个8帧的逐帧动画 */
@keyframes frame-move {
from {
background-position: 0 0;
}
to {
background-position: -800px 0;
}
}
.frame-box {
width: 100px;
height: 100px;
background-image: url('https://ipipp.com/sprites.png');
animation: frame-move 2s steps(8) infinite;
}
上述代码会让背景图在2秒内分8帧切换，形成逐帧动画效果，适合制作精灵动画、数字滚动等效果。
使用注意事项
在使用animation-timing-function时需要注意以下几点：
- 该属性可以作用于单个动画，也可以作用于多个动画，若设置多个值会用逗号分隔对应每个动画
- 当动画设置了animation-direction为alternate时，曲线会在反向播放时自动反转，比如ease-in反向会变成ease-out
- 不要过度使用复杂的自定义曲线，过于夸张的速度变化反而会让用户感到不适，优先选择符合自然规律的曲线
cssanimation-timing-function动画曲线前端动画修改时间：2026-07-20 00:54:26