带关键帧和缓动函数的可视化 CSS 动画编辑器
工具功能
- 可视化关键帧编辑器: 使用可视化时间轴界面创建和编辑 @keyframes 动画。在任何百分比添加/删除关键帧，为每个步骤设置 CSS 属性（transform、opacity、color），支持拖放时间轴
- 时间控制: 配置动画持续时间、延迟、迭代次数（无限或特定）、方向（正常/反向/交替）和填充模式（向前/向后/双向），实时预览更新
- 缓动函数: 从内置缓动函数（ease、linear、ease-in/out）中选择或使用可视化编辑器创建自定义三次贝塞尔曲线。预览缓动曲线并比较不同的时间函数
- 动画库: 预构建的动画预设：淡入/淡出、滑动（左/右/上/下）、弹跳、旋转、缩放、脉冲、抖动、翻转。自定义预设或用作复杂动画的起点
使用方法
- 选择类型: 在关键帧动画或过渡之间选择，或使用库中的预设
- 配置动画: 设置持续时间、延迟、缓动函数，并添加带 CSS 属性的关键帧
- 预览动画: 查看动画效果的实时预览并实时调整参数
- 导出 CSS: 复制生成的 CSS 代码，包括 @keyframes 规则和动画属性
生成原理
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 性能。
常见问题
- 这个工具有什么用途？
- 这个工具可以帮助您可视化创建 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 动画的最佳实践
- 缓动函数速查表 - 所有缓动函数类型的可视化参考