必须用百分比明确标出每个关键帧位置，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
多关键帧真正难的不是写法，而是时间点和属性值的协同——改一个百分比，往往要同步调三四个属性才不显得生硬。
