CSS 动画生成器
可视化生成 CSS 关键帧动画，控制时间、缓动、循环次数和方向，实时预览效果。
How to Use
- 从预设动画库中选择动画类型——淡入/淡出、滑动、缩放、旋转、弹跳、抖动、脉冲，或自定义关键帧序列。预览框立即播放动画效果。
- 自定义动画参数：duration（单次循环时长）、timing function（ease、ease-in、ease-out、linear 或自定义 cubic-bezier）、delay（开始前的延迟）、iteration count（具体次数或 infinite）和 direction（normal、reverse、alternate、alternate-reverse）。
- 在预览框中实时播放动画，满意后复制完整 CSS，包括 keyframes 规则和 animation 简写声明。
Frequently Asked Questions
- ease、ease-in 和 ease-out 有什么区别？
- ease（默认）开始慢、中间加速、结束慢，感觉自然流畅。ease-in 开始慢后加速（适合元素进入屏幕）。ease-out 开始快后减速（适合元素退出屏幕）。linear 保持匀速。如需完全控制，使用 cubic-bezier() 自定义加速曲线。
- 如何让动画无限循环？
- 将 animation-iteration-count 设为 infinite。结合 animation-direction: alternate 可实现正向后反向的平滑乒乓循环，非常适合脉冲效果、呼吸动画和加载旋转器。
- CSS 动画对性能友好吗？
- 在使用正确属性的前提下，是的。对 transform（位移、缩放、旋转）和 opacity 做动画是 GPU 加速的，在合成器线程上运行，不触发布局重排。避免对 width、height、top、left 或 margin 做动画，这些属性会触发昂贵的布局回流。生成器的预设优先使用仅合成器属性。