css动画无法直接控制某一段快慢，需通过拆分动画段、cubic-bezier()自定义曲线、steps()逐帧控制或javascript手动时间映射实现局部变速。
用 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 行逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
