什么是 CSS @keyframes？

@keyframes 是 CSS3 中定义动画关键帧的规则。通过指定动画在不同时间点（百分比 0%~100%）的样式，浏览器会自动计算中间帧，实现平滑的过渡动画。配合 animation 属性可以控制动画的时长、缓动、循环等行为。

animation 各属性分别控制什么？

animation-name 指定关键帧名称；animation-duration 控制动画时长；animation-timing-function 定义速度曲线（如 ease、linear、cubic-bezier）；animation-delay 设置延迟播放时间；animation-iteration-count 控制循环次数（infinite 为无限循环）；animation-direction 决定播放方向（normal、reverse、alternate）；animation-fill-mode 设置动画前后状态。

如何让动画只播放一次并在结束时保持最终状态？

设置 animation-iteration-count 为 1（默认），并将 animation-fill-mode 设为 forwards。forwards 表示动画结束后保持最后一帧的样式。如果需要在延迟期间也应用第一帧样式，可设为 both。

CSS 动画和过渡（transition）有什么区别？

transition 需要状态变化触发（如 hover），只能定义起止两个状态，适合简单的交互反馈。@keyframes 动画可以定义多个中间帧，支持自动播放、循环、方向控制等，适合复杂的独立动画效果。两者可以配合使用。

CSS 动画生成器

在线 CSS @keyframes 动画可视化构建工具，实时预览动画效果，一键复制 CSS 代码

动画预设

动画属性

时长 (duration)

延迟 (delay)

缓动函数 (timing-function)

循环次数 (iteration-count)

无限自定义

方向 (direction)

填充模式 (fill-mode)

关键帧编辑器 (@keyframes)

CSS 代码

@keyframes custom-animation {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.animated-element {
  animation: custom-animation 1s ease 0s 3 normal forwards;
}

CSS 动画生成器使用说明

主要功能

动画预设 - 内置 fade-in、slide-in、bounce、pulse、rotate、shake 等常用动画
属性控制 - 可视化调节 duration、timing-function、delay、iteration-count、direction、fill-mode
关键帧编辑 - 自由添加/删除关键帧步骤，编辑每个步骤的 CSS 属性
实时预览 - 播放、暂停、重置动画，即时查看效果
代码生成 - 一键生成完整 CSS 代码，包含 @keyframes 和 animation 属性

使用场景

网页交互动画设计与原型制作
页面加载动画、过渡效果开发
CSS 动画学习与教学演示
UI 组件动效快速生成
H5 营销页面动画制作

CSS 动画生成器

CSS 代码

CSS 动画生成器使用说明

主要功能

使用场景

常见问题

相关工具