CSS3动画制作技巧详解

本文深入剖析了CSS3动画在实际开发中极易被忽视却至关重要的细节陷阱：从@keyframes必须显式声明0%和100%关键帧以规避旧版Safari兼容问题，到animation缩写属性中时间值顺序与单位的严格要求；从仅transform和opacity可享受GPU加速、避免重排卡顿的性能铁律，到forwards填充模式的局限性及animationend事件固化状态的可靠替代方案——每一条都是踩过无数坑后凝练出的实战经验，直击移动端动画跳帧、回弹、静默失效等顽疾，帮你写出真正稳定、流畅、跨设备可靠的CSS动画。

用 @keyframes 定义动画时，百分比必须从 0% 开始、100% 结束

浏览器只认这两个关键帧锚点，漏掉任意一个，@keyframes 就算声明了也无效，元素加了 animation 也不会动。

常见错误是只写 from 和 to，但某些旧版 Safari 对 from/to 支持不稳定，尤其嵌套在 CSS-in-JS 或构建工具里时容易静默失效。稳妥起见，直接写 0% 和 100%。

• 0% 必须显式定义初始状态，比如 transform: translateX(0)，不能依赖元素默认值
• 中间帧（如 50%）可选，但若想控制缓动节奏或中途停顿，就得手动设
• 同一组 @keyframes 名称不能重复定义，后声明的会覆盖前声明的——调试时容易误以为动画“变慢”了，其实是被覆盖了

animation 缩写属性里，时间单位顺序不能错

animation: name duration timing-function delay iteration-count direction fill-mode play-state，其中 duration 和 delay 都要带单位（s 或 ms），且 duration 必须在 delay 前面。写反了，比如 animation: slide 2s 1s 是对的，但写成 animation: slide 1s 2s，浏览器会把 1s 当作 duration，2s 当作 delay，结果动画快得看不见。

• 如果只写一个时间值，它只被当作 duration，delay 默认为 0s
• iteration-count 写 infinite 没问题，但别写成 infitnite（拼错）——这种错不会报错，只是动画播一次就停
• 移动端 iOS Safari 对 animation-play-state: paused 的响应有延迟，hover 触发暂停时可能多播一两帧

动画卡顿？先关掉 transform 以外的属性变化

改 width、height、top、left 或 background-color 都会触发重排（reflow）或高成本重绘（repaint），尤其在中低端安卓机上掉帧明显。真正能进 GPU 加速的，只有 transform 和 opacity。

• 位移优先用 transform: translateX(100px)，别用 left: 100px
• 缩放/旋转统一走 transform: scale(1.2) rotate(5deg)，别拆成多个 transform 声明（CSS 会合并，但手写多了易错）
• opacity 动画很轻量，但别和 visibility 混用——visibility: hidden 不触发重排，但无法过渡；想淡出+隐藏，得用 opacity + pointer-events: none 控制交互

动画结束后保持最终状态，animation-fill-mode: forwards 不是万能的

它只保证动画停止那一刻的样式留在元素上，但如果动画被 JS 中断（比如调用 element.style.animation = 'none'），forwards 就失效了，元素会瞬间回退到动画前的状态。

• 更稳的做法：动画结束时，用 animationend 事件手动加一个 class，把最终样式写死在那个 class 里
• forwards 对 infinite 动画无效——无限循环没有“结束”，所以填不了
• 如果同时用了 transition 和 animation，且目标属性重叠（比如都动 opacity），动画会强行覆盖 transition，但 transition 的缓动函数可能干扰动画起始帧的平滑度

动画最难的不是写出来，是让它在各种机型、各种中断场景下不跳、不闪、不回弹。尤其是用户快速划过导航菜单、或者动画中途切页时，那些没被 animationend 捕获的残留状态，最容易暴露问题。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《CSS3动画制作技巧详解》文章吧，也可关注golang学习网公众号了解相关技术文章。