CSS 动画生成器，免费

使用方法

1. 选择动画预设：从常见动画中选择 ， 淡入、滑入、弹跳、旋转、脉冲、抖动等。
2. 自定义时长和行为：调整时长、延迟、缓动函数、迭代次数和填充模式。
3. 复制 CSS：完整的 @keyframes 定义和 animation 简写属性已准备好，可直接粘贴到您的样式表中。

为什么使用 CSS 动画生成器？

CSS 动画让界面栩栩如生 ， 吸引注意力、提供视觉反馈、并营造精致的用户体验。手写 @keyframes 规则需要掌握正确的语法、缓动函数名称和属性组合。这款生成器提供精心调校的动画预设，带实时预览，让您微调每个参数，产生可直接用于生产的 CSS ， 无需 JavaScript 或动画库。

功能特性

• 动画预设：淡入、滑动、弹跳、旋转、脉冲、抖动、翻转、缩放等 ， 全部带实时预览。
• 自定义关键帧编辑器：通过可视化界面从零构建自己的动画。
• 时间控制：设置时长（ms/s）、延迟、缓动（linear、ease、cubic-bezier）和迭代次数。
• 填充模式：控制 forwards、backwards、both 和 none 的行为。
• 无需 JavaScript：所有生成的动画均为纯 CSS ， 无需任何库或框架。

常见问题

CSS 中 animation 与 transition 有什么区别？

CSS 过渡（transition）由状态变化触发（悬停、聚焦、类切换），在两个状态之间过渡。CSS 动画使用 @keyframes 定义多个状态，独立于用户交互运行 ， 可以循环、反向播放并自动开始。

animation-fill-mode 是什么？为什么重要？

animation-fill-mode 控制元素是否在动画开始前保留首个关键帧的样式（backwards）、在动画结束后保留最后关键帧的样式（forwards）或两者都保留。如果没有 forwards，元素会在动画结束后突然回到原始样式。

CSS 动画性能好吗？

仅使用 transform 和 opacity 的动画会由 GPU 加速，非常流畅。应避免对布局属性（width、height、margin 或 top/left）做动画 ， 它们会触发布局重新计算，可能造成卡顿。请坚持使用 transform 和 opacity 以保持 60 FPS。

CSS 动画的真正作用

CSS 动画在时间上的定义关键帧之间插值一个或多个 CSS 属性，无需 JavaScript 即可产生可见的运动或变化。该模型有两部分：@keyframes 规则定义动画在基于百分比的步骤（0% 到 100%）上的样子，而 animation 简写属性（或其长写表亲 animation-duration、animation-delay、animation-timing-function、animation-iteration-count、animation-fill-mode）告诉浏览器如何播放该关键帧定义。浏览器在 C++ 中处理所有插值、缓动和帧定时，通常对 transform 和 opacity 变化进行 GPU 加速。

动画与 CSS 过渡在两方面不同。过渡在元素状态变化时（悬停、类切换、焦点事件）触发，并在恰好两个值之间插值：旧值和新值。动画独立于状态运行，遵循任意数量的关键帧步骤，可以无限循环，可以反向播放，可以通过 CSS 或 JavaScript 触发、暂停和恢复。过渡是「在半秒内从 A 跳到 B」的正确工具；动画是「让这个吸引注意的脉冲永远循环」或「当元素出现时播放一次入场序列」的正确工具。

对现代 Web 设计，CSS 动画替代了大量曾需要 JavaScript 库的工作。加载器、淡入、上滑、注意脉冲、成功对勾：现在都是标准的 CSS 模式。权衡是复杂序列的表达能力。CSS 动画可以做很多，但在约 5 到 7 个具有同步属性变化的关键帧步骤时不再方便；对于故事板动画、滚动链接序列或依赖 JavaScript 状态的任何动态内容，专用库（GSAP、Framer Motion、Web Animations API）仍是更好选择。

本工具的幕后运作

当你选择一个预设（例如「bounce」或「fade-in」）时，工具将预定义的 @keyframes 字符串加载到预览区域，并将动画属性应用于预览框。关键帧是真正的 CSS，不是自定义格式：你看到的就是你将复制的。滑块通过实时编辑内联 animation 属性来更新动画时间值（持续时间、延迟、迭代次数），因此预览即时反映每次更改，无需重新加载页面。

缓动函数选择使用标准 CSS 时间函数值：linear（恒定速度）、ease（默认，慢开始和结束）、ease-in（慢开始）、ease-out（慢结束）、ease-in-out（慢开始和结束），或 cubic-bezier(x1, y1, x2, y2) 用于自定义曲线。可见的动画曲线由浏览器原生的时间函数实现计算；预览是浏览器实际渲染的输出，不是 JavaScript 模拟。

代码框显示你需要放入样式表的完整 CSS：包括 @keyframes 块和 .your-class { animation: ... } 声明。点击「复制 CSS」，两者作为单个文本块写入你的剪贴板。没有文件生成，没有服务器处理任何东西，工具没有要调用的后端。预览、代码生成和剪贴板写入都在你设备上的 JavaScript 中发生。刷新页面，除非你先复制了，否则你的自定义配置就消失了。

Web 动画简史

• Flash 主导 web 动作，1996 至 2010 年。Adobe Flash（最初是 Macromedia）是 2000 年代初网络动画的主要工具。基于矢量、时间线驱动，带有自定义插件运行时。到 2010 年，Flash 为大多数横幅广告、YouTube 视频播放器和 Newgrounds 时代的游戏提供动力。然后移动设备杀死了它：iPhone 从未支持 Flash，Android 在 2012 年放弃了支持，浏览器在 2020 年弃用了插件。
• WebKit 中的 CSS 过渡，2007 年。Apple 的 WebKit 引擎在 2007 年发布 -webkit-transition，第一个常见部署的 CSS 动画原语。在早期 iPhone web 应用中大量使用。到 2009 年该属性进入 CSS 规范流程，到 2014 年在浏览器中无前缀发布。
• CSS Animations Module Level 1，2009 年。WebKit 在 2009 年 3 月添加 -webkit-animation 和 @-webkit-keyframes，先于 W3C CSS Animations Module Level 1 草案（也是 2009 年）。Firefox 在版本 5（2011）跟进，IE 在版本 10（2012）。「基本动画无需 JavaScript」的时代开始。
• GSAP 和 JS 动画库，2008 年起。jQuery 的 .animate() 方法（2006）开启 JS 动画库时代；GreenSock Animation Platform（GSAP，2008 年发布）成为复杂序列动画、时间线擦洗和性能的黄金标准。在 Disney、Coca-Cola 和 Awwwards 级营销网站中使用。继续与 CSS 动画共存：GSAP 用于序列复杂性，CSS 用于声明式简洁性。
• Web Animations API 标准化，2014 至 2018 年。W3C Web Animations 规范提供了一个 JavaScript API，公开 CSS 动画并添加程序化控制：element.animate(keyframes, options)。Chrome 在版本 36（2014）发布，Firefox 在版本 75（2020），Safari 在版本 13.1（2020）。弥合声明性 CSS 和完整库功能 JavaScript 之间的差距。
• 滚动驱动动画落地，2023 至 2024 年。CSS Scroll-driven Animations 模块引入 animation-timeline，让 CSS 动画绑定到滚动位置而不是（或除了）时间。Chrome 115（2023 年 7 月）首先发布；Safari 和 Firefox 在 2024 年和 2025 年添加支持。在纯 CSS 中解锁视差效果、滚动进度指示器和章节显示动画。

真实世界的工作流

• 加载旋转器和骨架状态。旋转加载器（animation: spin 1s linear infinite 带 360 度旋转关键帧）是最常见的 CSS 动画用途。带有滑动光泽效果的骨架屏使用 translateX 或 background-position 动画。两者对感知性能都是必不可少的：在内容加载时，动画告诉用户「我们正在处理它」而不是「它坏了」。
• 悬停和焦点微交互。在悬停时微妙脉动的按钮、聚焦时抬起的卡片、点击时摇摆的图标：这些微交互增加个性而无侵入性。对「播放一次并保持」行为使用 animation-iteration-count: 1 和 animation-fill-mode: forwards 的动画，或对「跳转到悬停状态」模式使用过渡。
• 吸引注意的 CTA。带有缓慢、连续脉冲或呼吸-辉光动画的主要号召行动按钮吸引眼球而不咄咄逼人。结合 transform: scale(1) to scale(1.05) 与 animation-iteration-count: infinite 和 3 到 4 秒的持续时间，获得平静的呼吸节奏。避免更快的脉冲；它们感觉狂躁，会迅速激怒用户。
• 页面入场和章节显示。页面加载或滚动进入视图时的淡入和上滑动画创造抛光的到达。CSS 处理简单情况（加载时运行一次的动画）；对于滚动触发的入场，JavaScript 中的 IntersectionObserver 在元素进入视口时添加一个触发动画的类。现代滚动驱动动画开始在纯 CSS 中替代这种模式。
• 成功反馈和错误震动。表单提交反馈使用动画提示：成功保存显示一个带有简短弹跳入场动画的绿色对勾，而错误简短地摇动表单（translateX 关键帧在 0.4 秒内交替 -10px 和 +10px）。这些小细节使交互感觉响应灵敏和有意为之。
• 营销 hero 和叙事序列。登录页和 hero 部分经常使用分阶段入场动画（logo 淡入、标题上滑、CTA 按钮脉动）通过设计的序列聚焦注意力。三个兄弟元素上的动画延迟（animation-delay: 0s, 0.3s, 0.6s）创造交错效果，无需 JavaScript 编排。

常见陷阱及其含义

• 动画化布局属性会扼杀性能。像 width、height、margin、padding、top、left、right、bottom 和 font-size 这样的属性在每个动画帧触发布局重新计算，经常导致 jank 或低于 60fps 的性能。使用 transform: translateX() 代替 left，transform: scale() 代替 width/height，opacity 代替 visibility。Transform 和 opacity 是 GPU 合成的，不会触发布局。
• 忽略 prefers-reduced-motion 损害可访问性。一些用户经历由 web 动画触发的晕动症或前庭障碍。prefers-reduced-motion: reduce 媒体查询让用户在 OS 级别选择退出。将装饰性动画包装在 @media (prefers-reduced-motion: no-preference) { ... } 中，或为请求减少动作的用户设置 animation-duration: 0.01ms。基本动画（加载器）可以保留，但装饰性动画应尊重偏好。
• 过度使用 will-change 损害内存。will-change 属性提示浏览器提前 GPU 提升元素，这可以平滑动画。但在许多元素上添加 will-change 消耗大量 GPU 内存。仅对你实际动画的元素应用它，理想情况下通过 JavaScript 在动画开始前添加并在之后删除。在页面上每个元素上设置 will-change: transform 是一种反模式。
• animation-fill-mode 混乱。默认情况下，动画结束后元素返回其原始样式。要保持动画的最终状态，使用 animation-fill-mode: forwards。要在延迟流逝之前在动画的第一个状态启动元素，使用 backwards。要两者都做，使用 both。许多「为什么我的元素弹回来？」的错误来自缺少此属性。默认值是 none，这很少是你想要的一次性入场动画。
• 无限动画耗尽移动电池。animation-iteration-count: infinite 动画永远运行，保持 GPU 活动和屏幕刷新率在其最大值。在移动设备上，这会明显耗尽电池。对于装饰性连续动画（轻轻呼吸的 logo），考虑在页面隐藏时暂停动画（document.visibilityState !== 'visible'），或将迭代计数限制为像 3 到 5 这样的有限数字，而不是无限。
• 大规模关键帧命名冲突。@keyframes 规则名称在样式表中是全局的：一个文件中的 @keyframes fade 与另一个文件中的 @keyframes fade 冲突。对于大型代码库，命名空间你的关键帧名称（@keyframes app-fade-in、@keyframes hero-slide-up）以避免静默覆盖。CSS 模块和 CSS-in-JS 库通过作用域哈希自动处理这一点。

隐私：一切都在你的浏览器中运行

CSS 生成器工具有两种风格：运行客户端 JavaScript 的简单 HTML 页面（私密、快速）和保存项目的云编辑器（协作但有隐私权衡）。这个工具是第一种。你的滑块值、你选择的预设、你生成的 CSS：所有都保留在你的浏览器会话中。刷新页面，状态消失，除非你先复制了 CSS。没有服务器存储你的动画选择，没有分析跟踪你测试的预设，也不需要账户。

隐私属性主要对专有设计工作很重要。一个工作室为机密客户项目原型设计动画，一个开发者在未发布应用的微交互上工作，或一个设计师迭代品牌活动：任何迭代历史或正在进行的设计可能泄漏工作信息的环境。使用此工具，没有任何东西被捕获，因为没有任何东西被发送。打开浏览器的网络选项卡，使用期间你会看到零出站请求；只有初始页面加载获取 HTML 和 JavaScript。

什么时候另一个工具是正确选择

• 复杂序列动画的 GSAP。GreenSock Animation Platform（GSAP）处理同步、序列、可擦洗动画远好于纯 CSS。对于故事板营销动画、带反向能力的滚动链接序列，或任何依赖 JavaScript 状态变化的内容，GSAP 是行业标准。大多数用例免费（一些插件需要俱乐部许可证）。
• 设计师创建的动画的 Lottie。Lottie（最初来自 Airbnb）将 After Effects 动画渲染为 JSON，允许设计师在 After Effects 中创建复杂运动并直接导出到 web/iOS/Android。对于超出手编关键帧实际可产生的动画（角色动画、复杂变形、插图序列），Lottie 的设计到代码管道胜过手动 CSS 动画。
• JavaScript 控制的 Web Animations API。如果你需要在运行时从 JavaScript 启动、暂停、反转或修改动画，Web Animations API（element.animate(keyframes, options)）比与 CSS 类作斗争更人性化。返回一个带有 .pause()、.play()、.reverse() 等方法和 .finished Promise 的 Animation 对象。原生浏览器支持，无需库。
• 游戏循环的 requestAnimationFrame。对于由连续 JavaScript 逻辑驱动的动画（游戏循环、物理模拟、实时数据可视化），requestAnimationFrame 加上手动每帧属性更新是正确的方法。CSS 动画是声明性的、预定义的；rAF 给你每帧控制更新什么。当你也需要像素级控制时使用 Canvas 或 WebGL。

更多常见问题

如何让动画只播放一次？

设置 animation-iteration-count: 1（如果未指定，则为默认值）。要让元素在动画完成后保持在动画的最终状态（而不是弹回原始样式），还要设置 animation-fill-mode: forwards。组合简写是 animation: fadeIn 0.5s ease-out forwards;。

我可以暂停和恢复动画吗？

可以，使用 animation-play-state: paused（或 running）。通过 JavaScript（例如，在按钮单击时）或通过 CSS 在 :hover 中切换此属性以获得「悬停时暂停」模式。动画在其当前点冻结，并在设置回 running 时从那里恢复，没有进度丢失。这在过渡中工作方式相同，但只有 animation-play-state 属性存在用于运行时暂停控制。

如何在点击或滚动时触发动画？

对于点击触发，通过 JavaScript 切换 CSS 类：element.classList.toggle('animate-in')。当类被添加时动画运行。对于滚动触发，使用 IntersectionObserver 检测元素何时进入视口并在那时添加类。对于现代浏览器，CSS Scroll-driven Animations 让你通过 animation-timeline: scroll() 直接将动画进度绑定到滚动位置而无需 JavaScript。

为什么我的动画闪烁或卡顿？

大多数闪烁/卡顿问题来自动画化触发布局的属性（width、height、top/left）而不是基于变换的等效项。从 left: 0 切换到 transform: translateX(0)，动画应该平滑。其他原因：许多半透明层的过度绘制、JavaScript 在同一帧中读取和写入样式的布局抖动，或动画元素上的过多阴影和滤镜。

我应该在可访问性关键界面上使用动画吗？

使用它们，但尊重 prefers-reduced-motion。WCAG 2.1 指南建议提供禁用非必要运动的选项。将装饰性动画包装在 @media (prefers-reduced-motion: no-preference) 中，以便设置 OS 偏好的用户获得静态体验。基本反馈动画（加载指示器、错误震动）可以保留；纯装饰性动画应该对敏感用户选择加入。

我可以使用 cubic-bezier 自定义缓动曲线吗？

可以。cubic-bezier(x1, y1, x2, y2) 时间函数让你用两个控制点定义任何缓动曲线。每个 x 值在 0 和 1 之间（代表时间），y 值可以是负的或大于 1（允许超调和反弹效果）。使用我们的 Cubic Bezier 工具或 Lea Verou 经典的 cubic-bezier.com 视觉地选择曲线。常见的预设替代品：ease、ease-in、ease-out、ease-in-out，以及线性别名 CSS 变量 cubic-bezier(0.25, 0.1, 0.25, 1)（默认 ease）。