关于 CSS 动画生成器
该工具用于可视化创建 CSS 动画，支持关键帧编辑、缓动与迭代设置、预设应用和实时预览。
核心功能
- 基础参数配置：动画名、时长、延迟、方向、迭代次数。
- 关键帧编辑：按百分比设置位移、缩放、旋转、透明度、背景色。
- 缓动控制：内置多种 easing 选项。
- 预设模板：快速套用常见动效并二次修改。
- 实时预览：支持播放、暂停、重置，观察不同元素表现。
- 代码输出：生成可直接复制的
@keyframes和动画样式。
使用说明
- 配置基础动画参数。
- 添加或修改关键帧节点。
- 在预览区播放检查效果。
- 复制生成的 CSS 代码到项目中。
使用场景
- 页面入场/强调动效快速打样。
- 设计规范中动画参数沉淀。
- 动效教学与前端练习。
常见问题
为什么动画看起来卡顿？
关键帧过多或属性组合复杂会增加渲染负担，建议优先使用 transform 与 opacity。
生成代码能直接用于生产吗？
可作为基础版本，建议按项目命名规范、性能要求和浏览器兼容策略再调整。