设置css样式动画 _ CSS样式动画设置方法与属性配置指南

最简可用CSS动画需同时定义@keyframes和启用animation；@keyframes名须与animation-name完全一致，至少含from/to，且animation-duration不可为0s或省略。

CSS 动画不是加个 animation 就能动起来的——漏写 @keyframes、混淆 animation-fill-mode 和 animation-direction 的行为，是 80% 以上初学者卡住的地方。

怎么写一个最简可用的 CSS 动画？

必须同时满足两个条件：定义关键帧 + 在元素上启用动画。缺一不可。

• @keyframes 名字要和 animation-name 完全一致（区分大小写），比如 @keyframes slideIn 对应 animation-name: slideIn
• 至少得写两个关键帧，from 和 to 最安全；只写 to 或只写 0% 会导致动画不触发
• 元素必须有明确的 animation-duration（哪怕设成 0.01s），值为 0s 或省略会直接失效

@keyframes bounce {  from { transform: translateY(0); }  to { transform: translateY(-20px); }}.box { animation: bounce 0.3s ease-in-out; }

animation-fill-mode: forwards 为什么经常被忽略？

动画播完就回退到初始状态，不是 bug，是默认行为。想让元素“停在最后一帧”，必须显式加 forwards。

• none（默认）：动画结束后恢复原始样式
• forwards：保留 to 或最后一帧的样式（最常用）
• backwards：动画开始前就应用 from 帧（常用于入场延迟）
• both：backwards + forwards 合体，但容易引发意外交互问题，慎用

典型踩坑：按钮 hover 动画加了 scale(1.1)，但没加 animation-fill-mode: forwards，鼠标移开瞬间就缩回去了。

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

animation-timing-function 怎么选才不假？

它控制“运动节奏”，不是“快慢”——ease 和 linear 看着差不多，但在滚动或交互反馈中感知极强。

• ease（默认）：先慢后快再慢，适合模拟自然惯性，但连续触发动画时易显拖沓
• ease-in-out：更平滑的起止，适合模态框淡入淡出
• cubic-bezier(0.16, 1, 0.3, 1)：推荐用于“快速响应+柔和收尾”的交互，比如按钮点击反馈
• 避免用 step-start/step-end 做非分步动画（比如进度条），否则会跳变

动画性能差、掉帧？先关掉这几个属性

不是所有 CSS 属性都适合动画。浏览器对 transform 和 opacity 做了硬件加速优化，其他大多触发重排（layout）或重绘（paint）。

• 绝对别对 width、height、left、top、margin 做动画——尤其在列表或高频滚动区域
• box-shadow 和 filter（如 blur()）动画开销极大，低端设备明显卡顿
• 用 will-change: transform 提前声明可提升性能，但别滥用——每个元素都加反而降低性能
• 移动端注意：iOS Safari 对 transform: scaleZ() 和 perspective 支持不稳定，优先用 scale3d(1,1,1) 替代 scale()

真正难的不是写出来，而是判断哪一帧该用 transform、哪一帧该用 opacity、哪一帧其实该交给 JS 控制节奏——这些边界往往藏在真实交互反馈里，而不是文档示例中。