CSS动画需四要素协同：@keyframes定义动作，animation-duration设定时长（不可为0），animation-timing-function控制速度曲线，animation-fill-mode（如forwards）保持结束状态；缺一或配置不当均导致动画失效。
初学 CSS 动画时，很多人卡在几个关键概念上：不是动画不触发，就是效果不对、停不住、闪一下就没了。问题核心往往不是写错了代码，而是对 @keyframes、animation-duration、animation-timing-function 和 animation-fill-mode 这四者的配合逻辑没理清。
为什么写了 @keyframes 却没动画？
常见原因是只定义了关键帧，但没把动画“挂”到元素上。@keyframes 只是动画蓝图，必须用 animation-name 显式调用它，且至少配一个时长（animation-duration），否则浏览器认为“动0秒”，等于没动。
- 漏写
animation-name: slideIn;—— 关键帧再完整也无效 - 写了
animation-duration: 0s;或干脆没写 —— 默认为 0，动画瞬间完成 - 选择器写错，比如用类名但 HTML 没加对应 class
动画播完就“弹回原形”，怎么让它停在最后一帧？
默认情况下，动画结束后元素会恢复到动画前的状态（即离开 @keyframes 定义的样式）。要让元素保持结束状态，必须设置 animation-fill-mode: forwards;。
-
forwards：动画结束后保留最后一帧的样式（最常用） -
backwards：动画开始前就应用第一帧样式（常配合animation-delay使用） -
both：同时生效forwards和backwards - 不写或写
none（默认值）：动画前后都不保留关键帧样式
动画太快/太慢、忽快忽慢，timing-function 怎么选？
animation-timing-function 控制动画过程中的速度变化节奏，不是简单“匀速 or 加速”。初学者容易误以为 ease 就是匀速，其实它是“先慢后快再慢”（类似自然启动+缓冲停止）。
立即学习“前端免费学习笔记（深入）”；
-
linear：真正匀速（适合转盘、滚动条等机械感场景） -
ease-in：缓慢起步，之后加速（像松手释放） -
ease-out：快速启动，缓慢收尾（像刹车） -
cubic-bezier(0.2, 0.8, 0.4, 1)：自定义贝塞尔曲线，可精细调控节奏（推荐用 cubic-bezier.com 可视化调试）
duration 写对了，但动画还是不执行？检查这些隐藏条件
即使所有属性都写了，以下情况也会导致动画静默失败：
- 目标属性不可动画化 —— 比如
display、height（从 0 到 auto）、font-size（单位混用，如px和em）无法过渡，需改用transform或明确数值单位 - CSS 优先级冲突 —— 后续样式（如
style="opacity: 0;"）覆盖了动画中的 opacity 值 - 父容器
overflow: hidden且动画移出范围，看起来像“消失” - 元素初始状态与 keyframes 第一帧完全一致，浏览器可能跳过渲染（可加
animation-delay: 0.01s触发重绘）
搞懂这四个核心点的分工和联动，CSS 动画就从“玄学”变成可预测、可调试的工具。重点不是背属性，而是理解：keyframes 定义“做什么”，duration 定义“做多久”，timing-function 定义“怎么做”，fill-mode 定义“做完后留下什么”。
