animation-fill-mode: forwards 是控制动画结束状态的核心，使元素保持100%关键帧样式；需显式声明0%/100%、避免样式冲突，并不可用transition替代。
animation-fill-mode: forwards 是起始/结束状态控制的核心
HTML5 动画默认不保留最后一帧样式，动画一结束就跳回初始状态。想让元素“停在终点”，必须显式设置 animation-fill-mode: forwards。没有它，@keyframes 里写的 100% 状态只是过程效果，不是最终 DOM 样式。
-
forwards让元素保持100%关键帧的样式（但不影响0%） - 若想动画开始前就呈现起始状态（比如先隐藏再淡入），需配合
animation-delay+animation-fill-mode: backwards - 同时用
forwards backwards可覆盖整个动画周期的样式：起始前显示0%，结束后保持100%
@keyframes 中 0% 和 100% 必须显式声明才可靠
浏览器对省略 0% 或 100% 的容错性差。哪怕只写 from/to，某些旧版 Safari 或安卓 WebView 会忽略起始值，导致闪动或错位。
@keyframes slideIn {
0% { transform: translateX(-100px); opacity: 0; }
100% { transform: translateX(0); opacity: 1; }
}
- 避免混用
from/to和百分比写法，统一用0%/100% - 如果起始状态和元素默认样式一致，仍要显式写出——否则动画可能从“未定义”状态开始插值
- 多个关键帧（如
25%,50%）中间断点缺失时，浏览器线性插值，但首尾必须明确
起始状态冲突：CSS 初始样式 vs keyframes 0% 优先级
元素已有内联样式或高权重 CSS 规则（如 style="opacity: 0.5"），会覆盖 @keyframes 0% 的值，导致动画不从预期起点开始。
- 检查 computed style，确认
0%声明的属性是否真正生效（用 DevTools 的 “Animation” 面板看 actual start value） - 若需强制覆盖，可在元素上加
!important（仅限调试），生产环境应清理样式层叠逻辑 - 更稳妥的做法：动画前用 JS 清除干扰样式，或把起始状态设为
all: unset后再进 keyframes
transition 不能替代 keyframes 控制起始/结束状态
有人试图用 transition + class 切换来模拟关键帧效果，但这无法精确控制中间状态，且起始/结束依赖 class 切换时机，容易因 JS 执行延迟或重排失败而错乱。
立即学习“前端免费学习笔记（深入）”；
-
transition没有animation-fill-mode，结束即还原；也没有0%/100%显式锚点 - 需要多步状态、暂停、反向播放等场景，必须用
@keyframes+animation - 性能上，
transform和opacity在 keyframes 中仍可 GPU 加速，和 transition 一致，无需妥协
关键帧的“起始”和“结束”不是时间概念，而是样式快照的锚点。漏掉 0%、忽略 fill-mode、或让外部样式污染 0% 值，是三个最常被跳过的硬性条件。
