CSS 动画生成器

Q: 减少动态效果选项添加了什么？

添加一个 `@media (prefers-reduced-motion: reduce)` 块，为在操作系统中启用了减少动态效果的用户设置 `animation: none`。

从预设或自定义关键帧创建 CSS @keyframes 动画，设置时长、延迟、循环次数、方向、填充模式和 cubic-bezier 曲线。

预设

关键帧

动画名称

关键帧（@keyframes { … } 内部）

每行一条规则，例如 50% { transform: scale(1.2); }。可随意编辑，预览会实时更新。

时间设置

时长s

延迟s

方向

填充模式

无限循环

缓动函数

对偏好减少动态效果的用户禁用

预览

CSS 代码

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-30px); }
  60% { transform: translateY(-15px); }
}

.animated {
  animation: bounce 1s ease 0s infinite normal both;
}

@media (prefers-reduced-motion: reduce) {
  .animated {
    animation: none;
  }
}

什么是 CSS 动画生成器？

构建完整的 CSS 动画：@keyframes 规则、animation 简写，以及可选的 prefers-reduced-motion 覆盖。可以从淡入、滑动、弹跳、脉动、抖动、旋转或心跳等预设开始，自由编辑关键帧，并用可拖动的 cubic-bezier 曲线调整时间节奏。

如何使用 CSS 动画生成器

选择预设，或输入你自己的“关键帧”（每行一条规则）。
设置“动画名称”“时长”和“延迟”。
选择“方向”“填充模式”，以及“无限循环”或“循环次数”。
选择“缓动函数”，或拖动 cubic-bezier 手柄 / 输入 X1、Y1、X2、Y2。
点击“重播”再看一遍，然后复制 CSS 代码。

示例

输入

Pulse preset, iterations 3, direction alternate, delay 0.5s, cubic-bezier(0.68, -0.6, 0.32, 1.6), reduced-motion off

输出

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

.animated {
  animation: pulse 1s cubic-bezier(0.68, -0.6, 0.32, 1.6) 0.5s 3 alternate both;
}

何时使用 CSS 动画生成器

适合入场效果、加载动画、引起注意的提示和微交互。对于简单的状态变化（悬停颜色、尺寸），CSS 过渡就足够了。请保持减少动态效果的选项处于启用状态，这样要求操作系统减少动态效果的用户就不会受到大幅度运动的影响。

CSS 动画生成器的工作原理

关键帧文本被包进 @keyframes name { … }，设置按标准简写顺序 name duration timing-function delay iteration-count direction fill-mode 写出。贝塞尔编辑器会把 X 值限制在 0–1（CSS 的要求），而 Y 可以超出范围以产生弹跳般的缓动；当四个值等于某个 CSS 关键字（ease、linear、ease-in、ease-out、ease-in-out）时，会写关键字。名称会被清理为有效的 CSS 标识符。预览使用私有的关键帧名称，因此永远不会与页面自己的动画冲突。