运行工具
CSS 动画生成器可帮助前端开发者快速构建基础淡入位移的 CSS 关键帧样式代码。工具支持自定义动画名称、持续时间、缓动函数、播放方向以及填充模式等核心参数。如果不填写动画名称，系统会自动使用默认名称 myAnimation；未调整其他选项时，持续时间默认为 1 秒，缓动函数为 ease，播放方向为 normal，填充模式为 none。生成的 CSS 代码包含完整的 @keyframes 规则以及元素上的 animation 简写声明。关键帧预设为淡入上移效果：0% 时元素透明度为 0 且垂直向下偏移 20 像素，100% 时透明度恢复为 1 且位移归零。开发者可以直接复制生成的样式文本并应用到前端项目中。
使用说明
- 在动画名称输入框中输入自定义名称，留空时将自动使用默认名称。
- 设置动画持续时间（单位为秒），例如输入 0.5 或 2。
- 输入所需的缓动函数，例如 ease、linear 或 ease-in-out。
- 选择或输入播放方向（如 normal、alternate）及填充模式（如 forwards、both、none）。
- 点击运行后，在结果面板中查看并复制生成的 CSS 代码。
示例
- 设置动画名称为 cardFadeIn，持续时间为 0.8 秒，缓动函数为 ease-out，填充模式为 forwards。生成结果包含 @keyframes cardFadeIn 定义以及 animation: cardFadeIn 0.8s ease-out normal forwards; 声明。
- 全部参数保持默认不作修改。生成结果包含 @keyframes fadeIn 规则（0% 处 opacity 为 0 且 translateY(20px)，100% 处 opacity 为 1 且 translateY(0)）和 animation: fadeIn 1s ease normal none; 声明。
常见问题
动画持续时间的单位是什么？
持续时间在生成的 CSS 声明中会自动添加秒（s）作为单位，例如输入 1.5 会输出 1.5s。
如果留空动画名称会怎样？
如果动画名称输入框为空，系统会自动使用 myAnimation 作为默认名称生成关键帧和动画规则。
生成的 CSS 动画包含哪些视觉变化？
生成的关键帧预设了从 0%（透明度 opacity 为 0、垂直位移 translateY(20px)）到 100%（透明度 opacity 为 1、垂直位移 translateY(0)）的淡入上升平移效果。
如何在网页项目中应用生成的代码？
复制生成的 @keyframes 规则与 animation 属性声明，粘贴至项目的 CSS 样式表中，并将属性分配给目标 HTML 元素的选择器即可。