CSS animation 动画生成器

可视化生成 CSS animation 动画：编辑 @keyframes 关键帧，每帧支持 translate、rotate、scale、opacity 属性；完整配置 duration、timing-function、delay、 iteration-count、direction、fill-mode、play-state 八大属性。实时预览动画效果，一键复制 @keyframes 与 animation CSS 代码。内置弹跳、旋转、脉冲、淡入、淡出、右滑入、抖动、摇摆 8 组预设。所有处理在浏览器本地完成。

预设：

animation 属性

动画名称时长 2s缓动函数延迟 0s播放次数方向 direction填充模式 fill-mode播放状态 play-state

@keyframes 关键帧（2 帧）

位置%

translateX 0pxtranslateY 0pxrotate 0degscale 1opacity 1

位置%

translateX 0pxtranslateY 0pxrotate 0degscale 1opacity 1

CSS 代码

@keyframes anim {
  0% {

  }
  100% {

  }
}

.box {
  animation: anim 2s ease infinite;
}

常见问题

CSS animation 属性包含哪些子属性？

animation 是 8 个子属性简写，顺序为：
① animation-name：引用的 @keyframes 名称
② animation-duration：一次动画周期时长，如 2s
③ animation-timing-function：缓动函数，如 ease、linear、cubic-bezier()
④ animation-delay：动画开始前的延迟，如 0.5s
⑤ animation-iteration-count：播放次数，如 3 或 infinite
⑥ animation-direction：方向，normal / reverse / alternate / alternate-reverse
⑦ animation-fill-mode：填充模式，none / forwards / backwards / both
⑧ animation-play-state：播放状态，running / paused
简写示例：animation: anim 2s ease 0s infinite alternate both running;

@keyframes 关键帧的百分比是什么含义？

@keyframes 中的百分比表示动画周期的时间节点：0% 是周期起点（等价于 from）， 100% 是周期终点（等价于 to），中间可插入任意百分比关键帧（如 25%、50%、75%）。浏览器会在相邻关键帧之间自动插值，产生平滑过渡。例如弹跳动画在 0% 与 100% 处 translateY=0（落地），50% 处 translateY=-40px（最高点），浏览器自动计算中间的位移。关键帧的百分比值不要求连续或有序，浏览器按数值升序应用。

animation-timing-function 的缓动函数有哪些？

缓动函数控制动画在每个关键帧之间的速度曲线：
① linear：匀速，适合旋转、进度条
② ease：默认值，慢入快出慢收
③ ease-in：慢入快出，适合淡出
④ ease-out：快入慢出，适合淡入
⑤ ease-in-out：慢入慢出，适合弹跳、脉冲
⑥ cubic-bezier(n, n, n, n)：自定义贝塞尔曲线，如 cubic-bezier(0.68, -0.55, 0.27, 1.55) 产生回弹 overshoot 效果
注意：timing-function 作用于"每个关键帧之间"，而非整个动画周期。可在关键帧内单独声明 animation-timing-function 控制单段曲线。

animation-fill-mode 的 forwards 和 backwards 有什么区别？

fill-mode 控制动画在执行前后的样式应用：
none（默认）：动画执行前用元素原始样式，执行后回到原始样式。淡入动画结束后元素会"消失"（回到 opacity:0 的原始状态）。
forwards：动画结束后保持最后一帧的样式。淡入动画结束后元素保持 opacity:1 的可见状态。
backwards：动画开始前（delay 期间）就应用第一帧的样式。淡入动画在延迟期间元素就已是 opacity:0 的不可见状态，避免闪烁。
both：同时应用 forwards 与 backwards 行为，是最安全的入场动画选择。
本工具的"淡入"预设使用 forwards，"右滑入"预设使用 both。

animation-direction 的 alternate 是什么效果？

direction 控制动画播放方向：
① normal：每次循环都从 0% 播放到 100%（正向）
② reverse：每次循环都从 100% 播放到 0%（反向）
③ alternate：奇数次正向、偶数次反向，形成往返效果。如左右摇摆动画正向滑出后反向滑回，无需定义反向关键帧。
④ alternate-reverse：奇数次反向、偶数次正向，与 alternate 起始方向相反。
alternate 系列要求 iteration-count 大于 1 或为 infinite 才能体现效果，单次播放时与 normal/reverse 无差异。

transform 与 animation 如何配合？

transform 是 CSS 属性，animation 是驱动属性随时间变化的机制。在 @keyframes 中声明 transform: translate() rotate() scale()，浏览器会在关键帧之间自动插值，产生平滑动画。transform 是 GPU 加速的合成层属性，不触发重排，是动画的首选属性（优于 top/left/width/height）。本工具每个关键帧支持 translateX/Y、rotate、scale 四个 transform 子属性 + opacity，覆盖 90% 的常见动画需求。配合站点现有的 CSS transform 可视化工具可先调好静态变换值，再到本工具组合成动画。

animation 与 transition 有什么区别？

两者都产生过渡效果，但触发机制与控制粒度不同：
transition：被动触发，仅在属性值变化时（如 :hover、class 切换）播放一次过渡，无法定义中间关键帧，只能从起值到终值线性插值。适合简单的悬停反馈、状态切换。
animation：主动驱动，通过 @keyframes 定义多个关键帧与缓动曲线，可循环播放（infinite）、控制方向（alternate）、暂停（paused）。适合加载动画、入场效果、持续循环动效。
简单悬停用 transition，复杂动效用 animation，两者经常配合使用。

数据会上传到服务器吗？

不会。本工具完全在浏览器内运行，所有关键帧编辑、属性配置、动画预览与 CSS 生成由 JavaScript 在你本地执行，不会发送到任何服务器。@keyframes 规则通过动态注入 <style> 标签生效，全程零网络请求，可离线使用。

CSS animation 动画生成器

常见问题

相关工具

相关博客