CSS控制复杂动画某段速度快慢，可通过animation-timing-function属性配合关键帧实现。具体步骤如下：定义关键帧动画 使用@keyframes创建动画，划分不同阶段（如0%、50%、100%）。@keyframes example { 0% { transform: translateX(0); } 50% { transform: translateX(200px);

CSS动画无法直接对某一段路径实现独立的快慢控制，必须通过拆分动画为多段并分别设置timing-function、利用cubic-bezier()自定义非线性缓动曲线模拟局部变速、使用steps()实现离散式节奏调控，或借助JavaScript配合requestAnimationFrame进行高精度时间映射——每种方案各具适用场景与取舍：CSS方案轻量但属近似解，JS方案灵活精确却增加复杂度，真正掌握“时间维度上的非线性映射”逻辑，才能游刃有余地塑造细腻流畅的动画体验。

用 animation-timing-function 控制动画某一段的快慢

不能直接“只调某一段”的速度，CSS 动画本身是整体应用一个缓动函数。真想局部变速，得把动画拆成多段，每段配独立的 animation-timing-function 和 animation-duration。

常见错误是试图在一个 @keyframes 里写多个 ease-in、ease-out —— 这没用，缓动函数只作用于整个动画周期，不识别“第30%到50%这段”。

• 把原动画按时间点切开：比如总长 2s 的动画，想让 0.5s–1.2s 变快，就拆成三段：0–0.5s、0.5–1.2s、1.2–2s
• 每段用独立的 animation 声明，或用多个 @keyframes + animation-delay 拼接
• 注意各段衔接处的属性值必须一致（比如 transform: translateX(100px) 在前一段结尾和后一段开头要完全相同），否则会跳变

用 cubic-bezier() 自定义一段“非匀速区间”

如果只是想让动画中间明显加速/减速，又不想拆段，cubic-bezier() 是更轻量的选择。它不是“分段控制”，但能模拟出类似效果——比如让 30%–70% 区间斜率陡峭（速度快），两端平缓（慢）。

典型误用：抄网上随便一个 cubic-bezier(0.42, 0, 0.58, 1) 就套用，结果发现加速感不明显。这是因为贝塞尔曲线的“陡峭区间”取决于四个控制点的相对位置，不是固定百分比。

• 用 cubic-bezier.com 可视化调试，拖动 P1/P2 点，重点观察曲线中段斜率变化
• 想突出“中间快”，把 P1 的 x 值设小（如 0.2）、P2 的 x 值设大（如 0.8），y 值尽量拉向 0 和 1，形成“S 形”曲线
• 注意兼容性：cubic-bezier() 在所有现代浏览器都支持，但 IE10+ 才开始支持，IE9 及以下直接失效回退为 ease

用 steps() 实现“卡顿式”局部加速（适合逐帧动画）

当动画本质是离散状态切换（比如翻页、进度条分步点亮、精灵图帧动画），steps() 比贝塞尔更可控——它能把动画强制切成等份，每份停留固定时长，从而让“某几步”看起来更快或更慢。

容易踩坑的是混淆 steps(5, end) 和 steps(5, start)：前者在每步**结束时**跳变，后者在每步**开始时**跳变，视觉节奏差一帧。

• steps(10, end) 表示把动画均分为 10 步，第 1 步从 0% 开始、在 10% 处跳到第一帧；第 10 步在 90% 开始、100% 处跳到最后一帧
• 若想让前 3 步慢（每步占 10% 时长）、后 7 步快（每步只占 3%），就不能用单个 steps()，得用两段动画 + animation-delay 拼接
• steps() 对 transform 和 opacity 生效，但对 width、height 等布局属性可能触发重排，性能更敏感

JavaScript 驱动动画时用 requestAnimationFrame + 时间映射

CSS 做不到真正意义上的“任意区间变速”，JS 才是终极方案。核心思路：不用 CSS animation，改用 requestAnimationFrame 手动计算每一帧的进度值，再映射到自定义时间轴上。

典型错误是直接在 raf 回调里写 element.style.transform = `translateX(${progress * 100}px)`，然后以为改 progress 的计算逻辑就能变速——其实漏了关键一步：进度必须基于真实经过时间（performance.now()），不能依赖帧数。

• 记录动画起始时间 startTime = performance.now()
• 在每一帧里算出已过时间 elapsed = now - startTime，再用自定义函数 mapTime(elapsed) 把它转成逻辑进度（例如：0–300ms 线性，300–800ms 平方加速，800ms 后线性）
• 这个 mapTime 函数就是你控制“哪一段快哪一段慢”的唯一入口，可任意嵌套条件或数学公式
• 注意：JS 动画无法被 CSS prefers-reduced-motion 自动降级，需手动监听并 fallback 到简单过渡

事情说清了就结束。最常被忽略的是：所谓“某一段变速”，本质是在时间维度上做非线性映射——CSS 提供的是近似解（拆段 / 贝塞尔 / steps），JS 才是精确解。选哪种，取决于你愿不愿意为那 10% 的控制精度，多写 20 行逻辑。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。