Maker Toolbox / CSS Animation Generator

CSS 动画生成器

让网页元素动起来。选择预设，调整节奏与缓动，把预览中的效果直接带进你的网页。

免费使用 · 无需登录浏览器本地生成，参数不上传

浏览 —导出发起 —

选择动效，调出节奏

动画幅度48px时长1.2s延迟0s

播放方向

缓动曲线

实时预览

滑动 · 1.2s · 无限循环

造物台

已暂停，点击播放继续。

带走你的动画

@keyframes maker-slide {
  from { transform: translateX(-48px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

.animated-element {
  animation: maker-slide 1.2s ease-in-out 0s infinite normal both;
}

/* 尊重系统的减少动态效果偏好 */
@media (prefers-reduced-motion: reduce) {
  .animated-element { animation: none; }
}

将 animated-element 类名添加到目标元素。HTML 示例包含样式和播放控制，无需外部依赖。

01 / 选择动效

淡入和滑动适合内容入场，缩放适合强调元素，弹跳与脉冲适合提示。先选预设，再调整幅度。

02 / 调整节奏

时长决定速度，延迟决定开始时间。选择往返可避免循环跳回；自定义 cubic-bezier 曲线可调节加速、减速和回弹。

03 / 应用到网页

复制代码到 CSS 样式表，给元素添加 animated-element 类名；下载 HTML 可离线试用。预览的暂停状态不会写入输出样式。

从一个动效，到更多灵感

浏览站内 HTML 动画作品，探索网页动效的表现形式。此工具生成元素级 CSS 动画，Canvas、Three.js 和复杂交互作品需要使用原作品源码。

浏览 HTML 动画作品 →

常见问题

怎样在线生成 CSS 动画代码？

选择动效预设，调整时长、延迟、幅度和缓动曲线后，复制生成的 CSS。将代码放进样式表，并为目标元素添加 animated-element 类名；也可以下载 HTML 示例查看完整用法。

为什么预览默认暂停？

如果系统开启减少动态效果，预览会默认暂停。你仍可主动播放；生成的 CSS 也包含 prefers-reduced-motion 规则，HTML 示例支持播放控制。

如何使用 keyframes 与缓动曲线？

@keyframes 描述元素变化，animation 把它应用到元素。缓动曲线控制变化的进度；x1、x2 取值为 0 到 1，y1、y2 可越过这个范围产生回弹。

为什么循环动画会跳回起点？

正向循环会在每次播放结束后从起点开始。入场动画通常使用一次播放；连续动效可选择往返方向，或使用首尾状态一致的弹跳与脉冲预设。