工具 指南
design 免费 无需注册

二维码生成器

可视化构建CSS @keyframes动画,带实时预览、时间控件和cubic-bezier缓动编辑器。

正在加载工具…

关于此工具

无需编写一行代码即可设计CSS动画。从淡入、滑动、弹跳、旋转、缩放、抖动、翻转、脉冲、摆动或自定义动画类型中选择,然后精细调整时长、延迟、迭代次数、方向和填充模式。选择缓动函数——包括可拖动编辑的cubic-bezier曲线——并实时查看动画元素更新。生成的@keyframes块和animation简写随时可以复制到您的样式表中。

使用方法

  1. 1 从下拉列表中选择动画类型(如弹跳、淡入、旋转)。
  2. 2 调整时间设置:时长、延迟、迭代次数、方向和填充模式。
  3. 3 选择缓动函数或拖动cubic-bezier控制柄创建自定义曲线。
  4. 4 从代码面板复制生成的CSS并粘贴到您的样式表中。

常见问题

{# Alpine.js — self-hosted. (The previous jsdelivr CDN tag had a stale SRI integrity hash, so the browser refused to run it and window.Alpine was never defined — silently breaking every FAQ accordion and Alpine tool.) #}