CSS 动画生成
CSS 动画生成是一款给开发者用的在线工具，淡入 / 滑入 / 缩放 / 旋转 / 弹跳 / 脉冲 / 抖动，可预览。打开页面就能用，不需要注册，也不需要安装任何软件。
CSS 动画生成怎么用
- 在「动画类型」里选择一项
- 在「时长（秒）」里拖动滑块调整
- 在「缓动函数」里选择一项
- 在「循环次数」里选择一项
- 在「播放方向」里选择一项
- 输入过程中会自动计算，结果实时刷新，无需点按钮
- 点击「生成代码」「重新播放」得到结果
- 结果出现在下方，点「复制结果」即可带走
需要填什么
- 动画类型：选择一项
- 时长（秒）：拖动滑块调整
- 缓动函数：选择一项
- 循环次数：选择一项
- 播放方向：选择一项
CSS 动画生成能用来做什么
- 做页面时先把 CSS 动画生成 的效果调出来，再复制代码进项目
- 对照设计稿快速还原间距、圆角、阴影等参数
- 检查配色是否满足无障碍对比度要求
这个工具的特点
- 所有计算都在你的浏览器里完成，粘贴的内容不会上传到服务器
- 无需注册登录，打开页面即可使用，手机端同样顺手
- 可视化调参、实时预览，代码可直接复制
常见问题
- 生成的代码能直接用吗？
- 输出的是标准 CSS，可直接粘贴使用。若项目用了预处理器或 CSS-in-JS，按需改成对应写法即可，属性值本身是通用的。
- 需要考虑浏览器兼容吗？
- 输出以现代浏览器为目标。若你要兼容较老的浏览器，注意渐变、clip-path、grid 等属性需要加前缀或准备降级方案。
- 用这个工具需要付费或注册吗？
- 都不需要。DevKit 上的工具全部免费开放，不设登录墙，也不限制使用次数。