CSS 动画快速生成与调优

从关键帧设计、时间函数选择到调优策略，帮助你更快产出可用动画。

关键帧设计

先确定起止状态，再补充中间关键帧控制节奏。

避免过多关键帧导致维护困难。

操作步骤

设置动画属性 → 调整时间函数 → 预览 → 导出代码。

注意移动端性能，减少昂贵的重排属性。

调优建议

优先使用 transform 与 opacity，确保动画更流畅。

在不同屏幕上测试，避免速度感差异。