animation-timing-function控制CSS动画的速度变化，通过预设值如ease、linear或cubic-bezier()自定义贝塞尔曲线，实现自然流畅的动画效果，提升视觉表现力。
在CSS动画中，元素的运动节奏可以通过animation-timing-function来控制，它决定了动画在时间上的加速度变化，也就是我们常说的“缓动”或“动画曲线”。通过合理设置这个属性，可以让动画看起来更自然、流畅甚至富有动感。
理解 animation-timing-function 的作用
animation-timing-function 定义了动画从开始到结束过程中速度的变化方式。即使动画总时长相同，不同的 timing function 会带来完全不同的视觉感受。
它适用于整个@keyframes定义的动画过程，控制每一段关键帧之间的时间分配。
- ease：默认值，慢开始，快中间，慢结束
- linear：匀速运动，每一帧速度一致
- ease-in：慢开始，加速到结束
- ease-out：快开始，减速到停止
- ease-in-out：慢进慢出，两端缓动
示例：
立即学习“前端免费学习笔记（深入）”；
.element {
animation: slide 2s ease-in-out;
}
@keyframes slide {
from { transform: translateX(0); }
to { transform: translateX(100px); }
}
使用贝塞尔曲线自定义动画节奏
如果预设的速度模式不够用，可以用 cubic-bezier() 函数创建自定义的动画曲线。
语法：cubic-bezier(x1, y1, x2, y2)，这四个参数代表贝塞尔曲线的两个控制点坐标（x 和 y 值必须在 0~1 范围内，除非需要超出范围实现弹性效果）。
-
cubic-bezier(0.68, -0.55, 0.27, 1.55)：弹跳式动画，先回拉再快速弹出 -
cubic-bezier(0.42, 0, 0.58, 1)：平滑的 ease 替代，常用于细腻过渡 -
cubic-bezier(0.1, 0.9, 0.2, 1)：快速启动并缓慢收尾
实际应用：
.bounce-in {
animation: fadeIn 1.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
@keyframes fadeIn {
from { opacity: 0; transform: scale(0.8); }
to { opacity: 1; transform: scale(1); }
}
分段设置动画曲线（关键帧级别控制）
除了全局设置animation-timing-function，还可以在@keyframes内部为不同阶段指定不同的缓动函数，使用 animation-timing-function 作为关键帧内的局部声明。
例如：让动画前半段线性移动，后半段 ease-out 收尾
@keyframes step-move {
0% {
transform: translateY(0);
animation-timing-function: linear;
}
50% {
transform: translateY(50px);
animation-timing-function: ease-out;
}
100% {
transform: translateY(0);
}
}
这样在 0% → 50% 使用线性速度，50% → 100% 则缓慢回弹。
结合 animation 简写属性高效设置
可以使用 animation 简写属性一次性定义动画名称、时长、曲线、延迟等。
.animated-box {
animation: float-up 3s cubic-bezier(0.17, 0.67, 0.83, 0.67) 0.5s infinite alternate;
}
其中顺序为：name duration timing-function delay iteration-direction...
推荐在开发调试阶段使用浏览器开发者工具中的“动画面板”，可直观查看和调整 timing-function 曲线。
基本上就这些。掌握animation-timing-function，特别是结合cubic-bezier()，能极大提升动画的表现力和真实感。不复杂但容易忽略。
