CSS 动画生成器

📖 工具介绍

CSS 动画生成器是一款面向前端开发者与视觉设计师的免费在线工具，它把过去需要手写 @keyframes 的繁琐过程变成了拖动滑块的直观操作。你只需要调节水平位移、垂直位移、旋转角度、缩放比例与结束透明度五个核心属性，再选择动画时长与缓动曲线，右侧舞台上的彩色小球就会立即按照你的设置播放动画，下方同步生成可以直接粘贴到项目样式表中的标准 CSS 代码。无论你是想给按钮加一个悬浮上浮效果、给图标做一个旋转入场，还是给页面元素设计一个淡入淡出的过渡，都可以在几秒内完成调试并复制代码。工具全程在浏览器本地运行，不发起任何网络请求，也不会上传你的参数；界面支持简体中文、繁体中文与英文三语，自动跟随网站主题色，在手机上同样可以流畅调节。无需注册、无需安装，打开即用，是提升交互动效开发效率的实用助手。

✨ 功能特点

• 五维关键帧属性：位移、旋转、缩放、透明度独立可调，组合出丰富的入场与循环动画
• 实时舞台预览：每次拖动滑块，小球都按最新参数播放，所见即所得
• 七种缓动曲线：从 linear、ease 到带回弹的 cubic-bezier，覆盖常见动效节奏
• 循环与方向控制：支持无限循环与往返方向，让首尾衔接更自然
• 标准代码输出：自动生成带 from / to 的 @keyframes 与 animation 简写属性
• 一键复制示例：内置回弹示例，点击即可体验完整动画并学习代码结构

📝 使用方式

1. 拖动左侧滑块，设置动画结束时的位移、旋转、缩放与透明度
2. 在时长框中输入动画持续秒数，从下拉框选择合适的缓动曲线
3. 勾选无限循环或选择正向、往返方向，观察右侧舞台的实时播放效果
4. 点击生成代码按钮，在代码区查看自动拼装好的 CSS 关键帧规则
5. 点击复制代码，把结果粘贴到你的项目样式表中即可使用

⚠️ 注意事项

• 时长取值：动画时长必须为大于 0 的数字，非法输入会回退到默认值并给出提示
• 坐标方向：位移支持负值，X 为负向左移动，Y 为负向上移动
• 缩放基准：缩放从 1 开始变化，设为 0 可实现元素消失或出现的淡入效果
• 性能提示：只对 transform 与 opacity 做动画可避免重排，获得最流畅的性能
• 本地运行：所有计算与预览均在浏览器完成，不产生网络请求，请放心使用