CSS动画生成器

在线 CSS 动画生成器，通过可视化界面操作位移、旋转、缩放、透明度等关键帧参数。支持缓动函数选择和实时效果预览，完成后一键导出动画代码，无需手写 CSS 动画。

CSS 动画生成器

可视化创建 CSS 动画，支持关键帧编辑与实时预览

动画预览
预设动画
动画设置
1s
0s
关键帧
0%
50%
100%
生成代码
@keyframes myAnimation {
  0% { transform: translateY(0); opacity: 1; }
  50% { transform: translateY(-30px); opacity: 1; }
  100% { transform: translateY(0); opacity: 1; }
}

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

描述

CSS 动画生成器适合在前端开发、设计协作和交互动效试验时快速搭建一段可直接复用的动画代码。页面把预设动画、关键帧编辑、时间参数设置和实时预览放在同一处，能够帮助你边调边看，再导出完整的 `@keyframes` 与 `animation` 配置。

页面能力

  • 内置弹跳、抖动、脉冲、旋转、淡入淡出、滑动、翻转、摇摆等预设动画，可一键载入关键帧。
  • 支持设置动画名称、时长、延迟、缓动函数、循环次数、播放方向和填充模式。
  • 支持新增或删除关键帧，并通过时间轴和实时预览快速观察效果变化。

关键帧说明

  • 当前编辑区主要围绕 `transform` 与 `opacity` 两类属性展开，适合制作位移、缩放、旋转、淡入淡出等常见动效。
  • 关键帧百分比越清晰，动画节奏越容易控制；建议优先确定 0%、中间态和 100% 三个核心节点。
  • 生成代码会自动按百分比排序，便于直接复制到组件样式或全局样式文件中使用。

使用建议

  • 先用预设动画作为起点，再微调关键帧和时间参数，通常比从零开始更高效。
  • 如果预览看起来太突兀，优先调整缓动函数和时长，而不是一开始就增加过多关键帧。
  • 本页更适合生成常见 CSS 动效；若需要复杂路径动画、SVG 动画或多元素编排，仍建议回到项目中进一步细化。

相关工具

返回分类

更多分类入口

首页