快速开始
打开 HeronTool 的 CSS 动画 (CSS Animation) 工具。您会看到左侧为属性面板，右侧为实时预览区域。选择要动画的元素（如按钮或图片），然后在“动画名称”下拉框中选择预设效果（如 fadeIn、slideUp），或点击“自定义”手动输入关键帧。
调整参数与预览
使用“时长”滑块（0.1s 至 10s）控制动画速度，“延迟”设定开始前的等待时间，“循环次数”可设为无限循环。您还可以调整“缓动函数”（ease、linear 等）来改变动画节奏。每项修改都会立即在右侧预览窗口中呈现，支持多元素同时预览。
导出与集成
点击“生成代码”按钮，工具会输出完整的 CSS 动画代码（包含 @keyframes）。您可以将代码复制到自己的项目中，或使用“导出 CSS 文件”下载 .css 文件。工具还提供“嵌入示例”选项，方便快速测试。
常见问题 (FAQ)
Q: 可以预览多个动画同时运行吗？
A: 可以。在预览区域添加多个元素，并分别设置不同的动画属性即可。
Q: 导出的代码格式是否标准？
A: 是的，代码符合 W3C CSS 规范，可直接用于生产环境。
Q: 是否支持移动端预览？
A: 支持。点击预览区的响应式切换按钮，可模拟手机屏幕效果。
文章标签
