必须用百分比明确标出每个关键帧位置，from等价0%、to等价100%，中间帧须用25%、50%等数字；animation-timing-function作用于每段区间而非整体；混用属性需避重排与抖动；调试宜拉长时间+加outline验证。

怎么用 @keyframes 定义多个关键帧

必须用百分比明确标出每个关键帧的位置，不能只写 from 和 to 就完事。浏览器靠这些百分比决定动画在时间轴上的分布节奏。

• from 等价于 0%，to 等价于 100%，但中间帧只能用数字百分比（如 25%、50%、75%）
• 百分比可以不按顺序写，浏览器会自动排序；但跳过某个区间（比如只有 0% 和 100%）就等于没加中间帧
• 同一百分比写多次，后面定义会覆盖前面的（CSS 层叠规则同样适用）

@keyframes slide-fade {
  0% {
    opacity: 0;
    transform: translateX(-20px);
  }
  50% {
    opacity: 1;
    transform: translateX(10px);
  }
  100% {
    opacity: 0.8
;
    transform: translateX(0);
  }
}

animation-timing-function 对多关键帧的影响

这个属性控制的是「每一段」关键帧之间的缓动效果，不是整个动画统一用一个缓动函数。也就是说，0% → 50% 和 50% → 100% 可以表现完全不同节奏。

• 如果没显式设置，整段动画默认使用 ease，即所有区间共用一个缓动函数
• 想让某段更线性、某段更突兀，得配合 animation-fill-mode 和分段动画拆解（见下一条）
• 注意：CSS 不支持为单个关键帧区间单独设 timing-function，这是常见误解点

多个关键帧 + 多个动画属性混用时的坑

当同时修改 transform、opacity、color 等不同属性时，浏览器会分别插值计算——但某些组合会触发非预期行为。

• 避免在同一个关键帧里混用 transform: scale() 和 width/height，可能导致重排（reflow）打断 GPU 加速
• background-color 从透明色（rgba(0,0,0,0)）变到实色，中间帧可能意外出现半透灰边，建议统一用 hsla() 或确保 alpha 始终显式声明
• 文字类属性（如 font-size、line-height）在关键帧中频繁变化，容易造成布局抖动，优先考虑用 transform: scale() 替代

调试多关键帧动画的实用方法

浏览器开发者工具对关键帧的支持有限，光看「动画」面板不一定能准确定位哪一帧出问题。

• 在 @keyframes 中临时加 outline: 1px solid red 到某个关键帧，肉眼确认是否执行到该帧
• 把动画时长拉长（比如设成 animation-duration: 10s），慢速观察每一阶段过渡是否符合预期
• 检查 computed 样式面板里 animation-name 是否生效，以及 animation-play-state 是否被意外设为 paused

多关键帧真正难的不是写法，而是时间点和属性值的协同——改一个百分比，往往要同步调三四个属性才不显得生硬。