预设动画库 - 常用CSS关键帧

@keyframes是CSS3中定义动画的核心规则。它允许开发者通过指定一系列关键帧（百分比节点）来描述元素从一种样式状态过渡到另一种样式状态的过程。浏览器会自动计算关键帧之间的过渡帧，从而产生流畅的动画效果。相比JavaScript动画，CSS动画性能更优，尤其在移动设备上表现更好。

CSS过渡（transition）：需要触发器（如:hover），只能在两个状态间切换，适合简单的状态变化。
CSS动画（animation）：可自动播放，支持多个关键帧（无限个状态节点），支持循环、反向、暂停等复杂控制，适合复杂动画序列。动画功能更强大，过渡使用更简单。

1. 优先使用transform和opacity：这两个属性只触发GPU合成层，不引发重排（reflow）和重绘（repaint），性能最佳。
2. 使用will-change属性提前告知浏览器将要变化的属性。
3. 避免在动画中修改布局属性（如width、height、margin、padding等）。
4. 使用transform: translateZ(0)或will-change: transform开启硬件加速。

animation: name duration timing-function delay iteration-count direction fill-mode play-state;
• name：关键帧名称
• duration：持续时间（如1s、500ms）
• timing-function：缓动函数
• delay：延迟时间
• iteration-count：播放次数（infinite为无限循环）
• direction：播放方向（normal、reverse、alternate）
• fill-mode：动画结束后状态（forwards保持结束状态）

所有现代浏览器（Chrome、Firefox、Safari、Edge）均已完整支持CSS3 @keyframes动画。IE10+也支持。移动端浏览器支持良好。无需添加浏览器前缀（-webkit-等），除非需要兼容非常老的浏览器版本。全球约98%+的用户浏览器支持CSS动画。

1. 使用Chrome DevTools的Animations面板（在More tools中打开），可可视化查看、慢放、暂停动画。
2. 检查animation-name是否与@keyframes名称完全匹配。
3. 确认animation-duration不为0。
4. 检查是否有其他CSS规则覆盖了动画属性。
5. 使用animation-play-state: paused暂停动画进行逐帧检查。