AnyTools
🎬

CSS 动画生成器

带关键帧和缓动函数的可视化 CSS 动画编辑器

实用指南

动画设置

动画名称
持续时间 (1s)
延迟 (0s)
时间函数
ease
方向
normal
迭代次数
1

预览

生成的 CSS

❓什么是 CSS 动画

CSS 动画使元素能够在不使用 JavaScript 的情况下从一种样式逐渐变化到另一种样式。@keyframes 规则定义动画序列，其中包含称为关键帧的中间步骤，在动画持续时间的不同百分比（0%、50%、100%）指定 CSS 属性。动画属性控制时间（持续时间、延迟）、重复（迭代计数）、方向（正常、反向、交替）和缓动（时间函数）。CSS 过渡提供由属性更改触发的更简单的基于状态的动画。动画改善用户体验，提供视觉反馈，引导注意力，并创建引人入胜的界面，同时通过硬件加速实现流畅的性能。

✨功能特点

🎬

可视化关键帧编辑器

使用可视化时间轴界面创建和编辑 @keyframes 动画。在任何百分比添加/删除关键帧，为每个步骤设置 CSS 属性（transform、opacity、color），支持拖放时间轴
⏱️

时间控制

配置动画持续时间、延迟、迭代次数（无限或特定）、方向（正常/反向/交替）和填充模式（向前/向后/双向），实时预览更新
📐

缓动函数

从内置缓动函数（ease、linear、ease-in/out）中选择或使用可视化编辑器创建自定义三次贝塞尔曲线。预览缓动曲线并比较不同的时间函数
🎨

动画库

预构建的动画预设：淡入/淡出、滑动（左/右/上/下）、弹跳、旋转、缩放、脉冲、抖动、翻转。自定义预设或用作复杂动画的起点

📚实用指南

Keyframes 规则

@keyframes 通过在各个点指定 CSS 样式来定义动画序列。语法：@keyframes name { 0% { property: value; } 50% { property: value2; } 100% { property: value3; } }。百分比表示时间轴位置（0% 是开始，100% 是结束）。替代关键字：from (0%) 和 to (100%)。多个属性可以同时更改。关键帧由 animation-name 属性引用。较旧的浏览器可能需要浏览器前缀 (@-webkit-keyframes)。关键帧可在多个元素间重用。

动画属性

animation 是八个子属性的简写：animation-name（关键帧名称）、animation-duration（时间长度）、animation-timing-function（缓动）、animation-delay（开始延迟）、animation-iteration-count（重复次数）、animation-direction（播放方向）、animation-fill-mode（前/后状态）、animation-play-state（运行/暂停）。简写语法：animation: name duration timing-function delay iteration-count direction fill-mode play-state。用逗号分隔的多个动画同时应用。属性可以单独设置以进行精细控制。

时间函数

时间函数使用数学曲线控制动画速度。内置关键字：ease（慢开始/结束，快中间）、linear（恒定速度）、ease-in（加速）、ease-out（减速）、ease-in-out（两者）。cubic-bezier(x1,y1,x2,y2) 使用控制点创建自定义曲线。值：x 在 0-1 之间，y 可以超出 0-1 以实现弹跳效果。cubic-bezier.com 等工具可视化曲线。steps(n, start|end) 创建步进动画。硬件加速应用于 transform 和 opacity 以实现 60fps 性能。

性能优化

对于流畅的 60fps 动画，优先动画化 transform（translate、scale、rotate）和 opacity，因为它们触发 GPU 合成而不需要重新计算布局。避免动画化 width、height、top、left、margin（导致重排）。使用 will-change: transform 提示浏览器即将进行的动画。限制并发动画和关键帧复杂性。使用 CSS 包含（contain: layout style）隔离动画范围。JavaScript 触发的动画使用 requestAnimationFrame()。减少运动媒体查询尊重用户可访问性偏好：@media (prefers-reduced-motion) 禁用或简化动画。

💬常见问题

❓这个工具有什么用途？
这个工具可以帮助您可视化创建 CSS 动画，无需手动编写代码。您可以生成 @keyframes 动画，配置时间函数，设置持续时间和延迟，并导出即用的 CSS 代码。非常适合网页开发者、设计师以及需要为网站添加流畅动画的用户。
💬如何使用这个 CSS 动画生成器？
只需配置您的动画设置：选择动画名称，设置持续时间，选择时间函数（ease、linear、cubic-bezier），配置延迟和迭代次数，并设置方向。工具会生成完整的 CSS 代码，包括 @keyframes 规则和动画属性。您可以预览动画并一键复制代码。
🔍这个工具是免费的吗？
是的，这个 CSS 动画生成器完全免费。无需注册、付费或创建账户。您可以立即在线使用，没有任何限制或限制。
💡我可以在这个工具中自定义关键帧吗？
是的，工具允许您创建自定义 @keyframes 动画。您可以在不同百分比（0%、50%、100%）定义 CSS 属性，包括 transform、opacity、color 和其他可动画属性。生成的代码包括 @keyframes 定义和应用它的动画属性。
📚哪些浏览器支持生成的 CSS 动画？
生成的 CSS 动画使用所有现代浏览器（Chrome、Firefox、Safari、Edge）支持的标准 @keyframes 语法。对于较旧的浏览器，您可能需要添加供应商前缀，如 @-webkit-keyframes。工具生成符合 CSS3 动画规范的标准 CSS。
🎯如何提高动画性能？
为了获得最佳性能，应动画化 transform 和 opacity 属性，因为它们会触发 GPU 加速。避免动画化布局属性，如 width、height、margin 或 padding。使用 will-change: transform 来提示浏览器。工具生成优化的代码，但在自定义关键帧时应应用这些最佳实践。
✨我可以在生产环境中使用生成的代码吗？
是的，生成的 CSS 代码可以直接用于生产环境。它遵循标准 CSS 动画语法和最佳实践。只需复制代码并粘贴到您的样式表中。您可能需要调整动画名称并自定义关键帧以匹配您的特定设计需求。

🔗相关文档

📖MDN - CSS 动画@keyframes 和动画属性的完整指南
🎨Cubic-Bezier.com可视化三次贝塞尔缓动函数编辑器
📚Animate.css 库包含 80+ 动画的即用 CSS 动画库
⚡CSS 动画性能指南高性能 CSS 动画的最佳实践
🎯缓动函数速查表所有缓动函数类型的可视化参考

User Comments

0 / 2000
Loading...