css动画多步骤连续执行如何实现_使用关键帧@keyframes定义

用@keyframes实现多步骤动画只需在一个规则中定义多个百分比节点，如0%→33%→66%→100%，确保transform等属性在每帧完整书写以避免跳变，合理分配时间点并统一单位可保证连贯性。

如何用 @keyframes 实现多步骤连续动画

直接写多个百分比节点就能串起多步骤动画，不需要拆成多个 @keyframes 或靠 js 拼接。关键在于时间点的精确分配和属性变化的连贯性。

比如从透明到不透明、再平移、最后缩放，三个动作按顺序发生，只需在一个 @keyframes 里定义 0% → 33% → 66% → 100% 四个状态即可。

• 0%：初始状态（opacity: 0; transform: translateX(0) scale(1);）
• 33%：完成淡入（opacity: 1;），位置和大小不变
• 66%：完成平移（transform: translateX(100px) scale(1);）
• 100%：完成缩放（transform: translateX(100px) scale(0.8);）

注意：transform 必须在每个关键帧中完整写出，浏览器不会自动补全或插值未声明的子属性（比如只写 scale 而漏掉 translateX，会导致该帧回退到 transform: none）。

为什么动画卡在中间或跳变

常见原因是关键帧之间属性类型不一致，或 transform 值未归一化。例如：

立即学习“前端免费学习笔记（深入）”；

• 在 0% 写 transform: translateX(0)，但在 50% 只写 scale(1.2) → 缺失 translateX，浏览器视为 transform: scale(1.2)，等价于 translateX(0) scale(1.2)，造成意外重置
• 混用单位：比如 left: 0px 和 left: 50% 同时出现在一个动画中 → 浏览器无法插值，可能跳变或停住
• 未设置 animation-fill-mode: forwards → 动画结束后元素立刻回到初始状态，看起来像“没执行完”

animation-timing-function 对多步骤的影响

整个动画默认使用同一个缓动函数，但你可以用 animation-timing-function: steps(3, end) 实现逐帧式分步（适合菜单展开、打字效果等），不过它和 @keyframes 百分比动画是两种范式，不能混用。

如果坚持用关键帧做“匀速分段”，更稳妥的方式是手动切分时间比例，并为每段配独立的 ease-in/ease-out：

0% { opacity: 0; } 25% { opacity: 1; } /* 淡入结束 */ 25.0001% { transform: translateX(0); } /* 平移起点，避免插值跳跃 */ 50% { transform: translateX(100px); } /* 平移结束 */ 50.0001% { transform: scale(1); } /* 缩放起点 */ 100% { transform: scale(0.8); }

这种写法能规避浏览器对同一属性在相邻关键帧间做“智能插值”的副作用，尤其在涉及 transform 组合时很实用。

兼容性和性能提醒

@keyframes 多步骤动画在所有现代浏览器中都支持，但有两点容易被忽略：

• 旧版 safari（≤ ios 9.3）不支持 transform 中多个函数混写（如 translateX(100px) scale(0.8)），需改用 matrix() 或降级为单属性动画
• 频繁变更 top/left 触发重排，而 transform 和 opacity 是合成层友好属性，优先选它们
• 如果步骤超过 10 个，建议拆成多个 animation 链式调用（用 animation-delay 控制时机），否则关键帧列表过长会增加 css 解析开销，且难以维护

真正难的不是写多少个百分比，而是想清楚哪几个状态必须显式声明、哪些可以交给浏览器插值——这决定了动画是否顺滑、是否跨设备一致。