17370845950

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 定义“做完后留下什么”。