生成器

CSS 动画生成器

可视化构建 CSS 动画，含实时预览、预设效果、时序控制和即时代码输出。

实时预览

背景颜色

#6366f1

W: 80px

H: 80px

圆角: 12px

动画名称

用作 @keyframes 名称和 animation 属性标识符。

持续时间: 1s

延迟: 0s

缓动函数

循环次数

方向

填充模式

浏览器前缀(-webkit-, -moz-)

淡入淡出

缩放

滑动

特殊

吸引注意

Tailwind 等价类

animate-in fade-in

需要 Tailwind CSS v3+ 及 animate 插件或 tailwindcss-animate。

生成的 CSS

@keyframes myAnimation {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

.element {
  animation: myAnimation 1s ease 0s infinite normal both;
}

/* Respect user motion preference */
@media (prefers-reduced-motion: reduce) {
  .element {
    animation: none;
  }
}

关于 CSS 动画生成器

CSS 动画生成器让你无需从零编写代码即可创建并自定义 CSS @keyframes 动画。从预设动画（淡入、滑动、弹跳等）中选择，调整时间、时长和迭代设置，实时预览，并将生成的 CSS 直接复制到你的项目中。

浏览所有生成器工具

如何使用

从画廊中选择一个预设动画，或编写自定义关键帧。使用控件调整时长、延迟、缓动函数和迭代次数。观看实时预览即时更新。自定义预览元素的外观以匹配你的使用场景。点击“复制 CSS”即可获取完整的动画代码，随时粘贴到样式表中。

常见用例

为 UI 组件创建进入和退出动画
构建加载指示器和注意力效果
为按钮、卡片和通知添加微交互
通过可视化反馈学习 CSS 动画语法
为客户演示快速制作动画原型

如何使用 CSS 动画生成器休息一下，来玩免费浏览器游戏吧

阅读和撰写工具评论→

讨论此工具→