如何生成 CSS 关键帧动画：参数设置与结果检查

概览：先生成一套基础动画结构

如果你需要快速准备一段可直接查看的 CSS 动画文本，这个工具可以根据动画名称、持续时间、缓动方式、播放方向和填充模式生成关键帧动画内容。它的输出同时包含关键帧动画和元素动画声明，适合先确定基础动画结构，再复制到自己的样式表中调整。

操作步骤：填写参数并生成 CSS

1. 打开工具后，先填写动画名称。名称可以使用便于识别的英文标识；如果不填写，生成时会使用 myAnimation。如果完全省略名称，默认名称则是 fadeIn，因此需要区分“未提供名称”和“提供空名称”这两种情况。

2. 设置持续时间，例如输入 2。生成的动画声明会在这个数值后加入秒单位，形成 2s。再按需要选择缓动方式、播放方向和填充模式；这些项目都属于可配置输入。

3. 提交或执行生成操作，查看返回的 CSS 文本。成功结果应包含一段关键帧定义，以及把该动画应用到元素上的动画声明。

4. 复制结果前，检查名称是否与页面中使用的动画名称一致，并确认持续时间、缓动方式、播放方向和填充模式符合预期。若你没有提供这些输入，工具会分别采用 fadeIn、1、ease、normal 和 none 作为默认值。

结果解读：确认名称、单位与固定动作

生成结果的关键帧内容是固定的两段式进入动画：在 0% 时，不透明度为 0，垂直位移为 20px；在 100% 时，不透明度为 1，垂直位移回到 0。因此，这个工具适合生成淡入并向上移动的基础效果。名称、持续时间、缓动方式、播放方向和填充模式可以改变动画声明中的配置，但不能据此期待自定义关键帧阶段或其他 CSS 属性。

查看结果时，先确认关键帧名称和动画声明中的名称相互对应，再核对持续时间是否带有 s 单位。若需要完全不同的视觉效果，生成结果只能作为这组固定关键帧的起点，仍需自行修改样式。

使用示例

页面需要一段名为 slideIn、持续两秒并在播放方向和结束状态上使用自定义设置的进入动画。

在动画名称中输入 slideIn，持续时间输入 2，缓动方式设为 ease-in，播放方向设为 alternate，填充模式设为 forwards，然后执行生成并检查 CSS 文本。

结果包含以 slideIn 为名称的关键帧定义，以及元素动画声明；声明中的持续时间为 2s，并带有 ease-in、alternate 和 forwards 等设置。关键帧的两个阶段分别呈现不透明度 0、垂直位移 20px，以及不透明度 1、垂直位移 0。

使用限制

• 关键帧阶段和动作内容固定为不透明度及垂直位移变化；可配置项目不代表支持自定义关键帧阶段或其他 CSS 属性。

常见错误

• 名称留空后却按预期的自定义名称查找动画，原因是空名称会被替换为 myAnimation；请填写非空名称，并在关键帧定义和动画声明中使用同一个名称。

常见问题

不填写 CSS 动画名称时会使用什么？

未提供动画名称时会使用 fadeIn；如果明确提供的是空名称，生成前会将其替换为 myAnimation。

持续时间需要自己输入秒单位吗？

不需要。只需输入纯数字，工具会自动拼接秒单位 s；例如输入 2，生成的动画声明中会呈现为 2s。

生成的关键帧默认实现什么效果？

关键帧包含两个阶段：0% 时不透明度为 0、垂直位移为 20px；100% 时不透明度为 1、垂直位移为 0。