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