CSS 动画 - 开发工具 · 萤炬工具箱

CSS 动画生成器通过可视化方式配置关键帧动画：设定时长、缓动函数、循环次数、延迟等参数，并从常用动画预设（淡入、滑动、缩放、旋转等）快速起步。实时预览动画效果，确认后复制完整的 @keyframes 与 animation 代码。优先动画 transform 与 opacity，避免动画布局属性。

CSS 动画生成器通过可视化方式配置关键帧动画：设定时长、缓动函数、循环次数、延迟等参数，并从常用动画预设（淡入、滑动、缩放、旋转等）快速起步。实时预览动画效果，确认后复制完整的 @keyframes 与 animation 代码。

使用步骤

1. 从预设动画中选一个作为起点，或从空白开始自定义。
2. 调整时长、缓动函数（ease / linear / cubic-bezier）、延迟与循环次数。
3. 在预览区反复播放确认效果，微调关键帧数值。
4. 复制生成的 @keyframes 与 animation 声明到样式表。

功能与限制

• 优先动画 transform 与 opacity，避免动画布局属性。
• 生成的代码包含 @keyframes 定义与 animation 简写，两者都要复制。
• 需要尊重用户偏好时，用 prefers-reduced-motion 媒体查询为动画敏感用户降级。

常见问题

CSS animation 与 transition 该用哪个？

transition 只能在两个状态间过渡、需要事件触发（如 hover）；animation 可定义多个关键帧、能自动播放与循环。做入场动画或循环动效用 animation。

哪些属性做动画性能最好？

transform 与 opacity 由 GPU 合成，不触发重排重绘，性能最好。动画 width、height、top、left 会触发布局计算，帧率明显下降。

animation-fill-mode 有什么用？

控制动画播放前后元素的样式：forwards 保持最后一帧，backwards 提前应用第一帧，both 两者都要。不设置时元素会在动画结束后跳回原样式。

为什么动画在移动端卡顿？

多为同时动画元素过多、动画了触发重排的属性，或阴影/滤镜叠加过重。改用 transform + opacity，并考虑用 will-change 提示浏览器提前分层。