CSS动画生成器

CSS @keyframes动画属性在线生成工具

CSS 动画生成器提供预设动画模板和自定义关键帧，可视化调整参数并生成 @keyframes 代码，适合快速实现交互动画。

CSS Animation 生成器

动画预设

动画名称

时长 (s)

循环次数0 = infinite

延迟 (s)

缓动函数

方向

自定义 Keyframes

from

CSS 代码

@keyframes myAnimation {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.animated-element {
  animation-name: myAnimation;
  animation-duration: 1s;
  animation-timing-function: ease;
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  animation-play-state: running;
}

/* 简写 */
.animated-element {
  animation: myAnimation 1s ease 0s 1 normal forwards;
}

使用说明

选择预设动画或自定义动画属性，生成可复制的CSS动画代码

使用步骤

选择预设动画类型（弹跳、淡入、旋转等）或自定义关键帧。
调整持续时间、延迟、缓动函数、迭代次数。
实时预览动画效果。
复制生成的 @keyframes 和 animation CSS 代码。

常见问题

animation 和 transition 有什么区别？

transition 需要触发条件（hover 等）且只能从初态到终态；animation 自动播放且支持多关键帧、循环。

缓动函数 ease 和 linear 如何选择？

ease 先快后慢更自然；linear 匀速机械感；cubic-bezier() 可自定义曲线。弹跳效果用 steps()。

动画会影响页面性能吗？

transform 和 opacity 动画由 GPU 加速，性能最佳。避免动画 width、height、left 等触发布局重排的属性。