App 登录页提审
产品经理给 iOS 审核团队提交了一个带加载动画的登录页 demo，但动画只在 Chrome 上正常，Safari 里卡帧。离提审窗口关闭还有 3 小时，设计师手头没有纯 CSS 动画库。本工具提供 200 多种经主流浏览器验证的纯 CSS 加载动画，选中后复制代码直接替换原动画层，Safari 渲染平滑，审核一次性通过。
定 制Customize · 主辅色 / 尺寸 / 速度 / 线宽
主色 color
辅色 accent
尺寸 size
56px
速度 duration
1.2s
线宽 width
5px
画 廊Gallery · 纯 CSS · 实时播放
css-loader
就绪 · 纯 CSS 加载动画 · 无任何依赖 · 全程浏览器本地处理
第一节
关于本工具
About设计师调CSS动画，最怕的不是写不出来，是在CodePen里翻到满意的效果，却要手动删掉无关的HTML和JS，只留下那段关键的关键帧。这个工具把一百多种加载动画整理成可直接复用的CSS代码段，点开即见效果，复制就是纯CSS代码，不附带任何多余标记。所有渲染和代码提取都在浏览器本地完成，页面关闭即清空——适合需要快速迭代加载态的设计稿，也适合不想在项目里引入第三方动画库的前端开发。
使用场景
官网首屏加载优化
电商大促前夜，前端发现首屏用了一张 2MB 的 GIF 作为 loading 占位，移动端加载要 4 秒。运营要求保留动效，但 GIF 色深和尺寸已锁死。本工具提供轻量 CSS 动画，选中一个 2KB 的旋转圆环，替换后首屏加载时间从 4 秒降到 0.8 秒，且不依赖 JavaScript，用户禁用脚本也能看到动画。
内部报表系统改版
运维团队自建的报表页面每次刷新要等 10 秒，后端数据量大，但前端 loading 动画用的是系统默认的旋转光标，用户分不清是卡死还是在加载。本工具提供带进度暗示的脉冲动画（如循环渐变的条形），复制代码嵌入后，用户通过动画节奏就能判断数据仍在传输，不再反复刷新页面。
个人博客夜间模式适配
博主切换夜间模式后，原有的白色背景 loading 动画变成白块闪烁，影响阅读体验。本工具提供深色背景兼容的 CSS 动画（如浅色粒子、透明边框旋转），选中后复制代码替换原动画，夜间模式下动画与背景无缝融合，无需额外写媒体查询。
低代码平台组件库更新
低代码平台内置的加载动画只有 3 种，客户要求增加至 10 种以匹配不同业务场景（如数据导入用进度条、文件上传用波浪线）。本工具提供 200+ 种动画，开发直接复制 CSS 代码注入组件库，无需额外写动画关键帧，2 小时内完成所有新增组件的动画配置。
第二节
使用指南
Getting Started使用步骤
- 1在动画列表中点选一个样式（如「旋转方块」），预览区立即播放该动画效果
- 2点击「复制 CSS」按钮，代码片段自动存入剪贴板，同时按钮显示「已复制」反馈
- 3在「自定义」面板调整颜色、大小或速度滑块，预览区同步更新动画外观
- 4点击「代码预览」展开面板，可查看当前动画的完整 CSS 代码，支持手动修改
输入输出示例
| 输入 | 输出 | 说明 |
|---|---|---|
| （点击「旋转方块」动画预览区的复制按钮） | .loader { width: 50px; height: 50px; border: 5px solid #e0e0e0; border-top: 5px solid #3498db; border-radius: 50%; animation: spin 1s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } | 常规：最典型的旋转加载动画，用户最常复制的基础样式，验证一键复制功能是否完整输出CSS代码 |
| （点击「脉冲圆点」动画预览区的复制按钮） | .loader { width: 20px; height: 20px; background-color: #3498db; border-radius: 50%; animation: pulse 1.5s ease-in-out infinite; } @keyframes pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.5); opacity: 0.5; } } | 常规：涉及scale和opacity组合动画，验证动画关键帧多阶段输出的完整性 |
| （点击「波浪条」动画预览区的复制按钮） | .loader { display: flex; justify-content: center; align-items: center; gap: 5px; } .loader span { width: 6px; height: 30px; background-color: #3498db; animation: wave 1.2s ease-in-out infinite; } .loader span:nth-child(2) { animation-delay: 0.1s; } .loader span:nth-child(3) { animation-delay: 0.2s; } .loader span:nth-child(4) { animation-delay: 0.3s; } @keyframes wave { 0%, 40%, 100% { transform: scaleY(0.5); } 20% { transform: scaleY(1); } } | 常规：多元素+延迟动画，验证工具能否正确输出伪类选择器和多个子元素样式，常见于进度加载场景 |
| （点击「无限旋转环」动画预览区的复制按钮） | .loader { width: 60px; height: 60px; border: 6px solid #f3f3f3; border-top: 6px solid #e74c3c; border-radius: 50%; animation: spin 0.6s linear infinite; } | 边界：动画速度极快（0.6s），验证工具对animation-duration极短值的输出是否精确，同时测试不同颜色变量的兼容性 |
| （点击「跳动方块」动画预览区的复制按钮） | .loader { width: 30px; height: 30px; background-color: #2ecc71; animation: bounce 0.5s ease infinite alternate; } @keyframes bounce { from { transform: translateY(0); } to { transform: translateY(-20px); } } | 边界：使用alternate方向+from/to简写，验证工具对非百分比关键帧语法的输出是否正确，区别于常规的0%/100%写法 |
| （点击「渐变旋转」动画预览区的复制按钮） | .loader { width: 80px; height: 80px; background: conic-gradient(#9b59b6, #3498db, #9b59b6); border-radius: 50%; animation: spin 2s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } | 易错：conic-gradient渐变背景，用户常误以为需要额外前缀或兼容写法，验证工具是否直接输出标准语法（无-webkit-前缀），暴露浏览器兼容性提示缺失 |
| （点击「闪烁文本」动画预览区的复制按钮） | .loader { font-size: 24px; font-weight: bold; color: #e67e22; animation: blink 1s step-end infinite; } @keyframes blink { 50% { opacity: 0; } } | 易错：使用step-end而非ease，且关键帧只有50%一个中间态，验证工具对非连续动画（闪烁效果）的输出是否准确，常见于加载文字提示场景 |
常见错误对照
1.复制 CSS 时漏掉浏览器前缀
✗ 错误
animation: spin 2s linear infinite;✓ 修复
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } } @keyframes spin { 100% { transform: rotate(360deg); } }部分加载动画依赖 -webkit- 前缀，在旧版 Chrome/Safari 中不加前缀动画不生效。工具生成的代码已包含前缀，复制时请完整选取。
2.直接粘贴到内联 style 属性
✗ 错误
<div style="@keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.2); } }">✓ 修复
将 @keyframes 放入 <style> 标签或 CSS 文件，再给元素添加 class="pulse"@keyframes 是 CSS 规则，不能写在 HTML 元素的 style 属性里，只能放在 <style> 或外部样式表中。
3.忘记给目标元素添加动画类名
✗ 错误
只复制了 @keyframes 代码，未在元素上声明 animation 属性✓ 修复
.spinner { animation: spin 1s linear infinite; }@keyframes 只定义动画关键帧，必须通过 animation 属性（或简写）绑定到具体元素才会播放。
4.动画时长设为 0s 或负值
✗ 错误
animation: bounce 0s ease;✓ 修复
animation: bounce 0.5s ease;动画时长（animation-duration）为 0s 时动画不播放；负值会被浏览器视为 0s。常见加载动画至少需要 0.3s 才能被肉眼感知。
5.animation-iteration-count 设为 0
✗ 错误
animation: fade 1s 0;✓ 修复
animation: fade 1s infinite; 或 animation: fade 1s 3;iteration-count 为 0 时动画不播放。加载动画通常需要 infinite（无限循环），或指定具体次数。
6.在 display:none 元素上使用动画
✗ 错误
<div style="display:none" class="loader"></div>✓ 修复
先确保元素可见（display:block/flex/inline-block），再触发动画display:none 的元素不参与渲染，CSS 动画不会触发。需要动画的元素必须处于可见状态。
7.动画属性与 transition 冲突
✗ 错误
.box { transition: all 0.3s; animation: shake 0.5s; }✓ 修复
避免对同一元素同时使用 animation 和 transition 改变相同属性animation 和 transition 会竞争同一属性的控制权，导致动画卡顿或跳变。建议只使用其中一种方式。
第三节
工作原理
How It Works核心公式
动画总帧数 = 动画时长(秒) × 帧率(fps)
变量说明
动画总帧数整个动画循环的帧数量动画时长单次动画循环的持续时间，单位秒帧率每秒播放的帧数，单位 fps
示例
CSS Loader 中一个旋转加载动画时长为 1.2 秒，帧率设为 60 fps：动画总帧数 = 1.2 × 60 = 72 帧。这 72 帧均匀分布在 360° 旋转中，每帧旋转角度 = 360 ÷ 72 = 5°，实现平滑旋转效果。
用户操作
工具处理
最终输出
第五节
常见问题
Q & A问这个加载动画能直接用在网页上吗？怎么复制？＋
答
可以。每个动画预览下方都有「复制 CSS」按钮，点击后会把该动画对应的完整 CSS 代码（含 @keyframes 和容器类）复制到剪贴板。你只需要在网页的 CSS 文件或 <style> 标签里粘贴，然后在 HTML 元素上加对应的 class 名就能生效。不需要手动写任何额外代码。
问我复制了代码，但页面上的动画没动，可能是什么原因？＋
答
最常见的原因是忘记给目标元素加上 CSS 类名。比如动画代码里定义的类叫 .loader-spin，你的 HTML 元素必须写 class="loader-spin"。第二是 CSS 作用域问题：检查复制的代码是否被其他同名类覆盖，或者是否放在了 @media 或 @container 内部。第三是浏览器不支持 CSS 动画（极少数老浏览器），但现代浏览器基本都支持。
问动画的持续时间和颜色能改吗？＋
答
可以。复制的 CSS 代码里，动画相关属性（如 animation-duration、background-color、border-color）都是普通 CSS 属性，你可以直接在代码里改数值或颜色值。比如想加速就把 2s 改成 0.5s，想改色就把 #ff6600 改成 #00aaff。本工具不提供可视化调参面板，但 CSS 本身修改门槛很低。
问这些动画是纯 CSS 实现的吗？会不会用到 JavaScript？＋
答
全部是纯 CSS 实现，不依赖任何 JavaScript。所有动画效果通过 @keyframes 规则和 animation 属性完成，包括旋转、缩放、位移、透明度变化。这意味着你可以在不支持 JS 的环境（如某些静态页面、邮件模板、AMP 页面）中使用，也不会因为 JS 加载失败导致动画无效。
问同一个页面放多个不同的加载动画，会不会互相干扰？＋
答
只要每个动画的 CSS 类名不同就不会干扰。本工具生成的每个动画都有独立的类名（如 .loader-spin、.loader-pulse），不会出现命名冲突。但如果你手动改代码把两个动画的类名改成一样的，它们就会共享同一套动画行为。建议复制后直接使用，不要随意重命名类名。
问为什么有的动画在手机浏览器上看起来卡顿？＋
答
卡顿通常是因为动画使用了大量渐变、阴影或复杂变换，这些在低端手机 GPU 上渲染压力较大。建议优先选择只涉及 transform 和 opacity 属性的动画（如旋转、淡入淡出），这类动画浏览器会启用 GPU 加速，性能最好。如果一定要用复杂动画，可以尝试降低 animation-duration 减少帧率负担。
问这个工具和那些生成 SVG 动画的网站有什么区别？＋
答
核心区别是输出格式。本工具只输出 CSS 代码，适用于 Web 前端开发场景；SVG 动画生成器输出的是 SVG 标签代码，适合图标、Logo 等嵌入场景。CSS 动画的优势是复用性强、可被网页全局样式控制、不增加额外 DOM 节点；SVG 动画适合需要精确矢量图形且不依赖外部 CSS 的场景。如果你做的是网页加载提示，CSS 更方便。
问我复制了代码但动画一直转不停，怎么让它只转几秒就停？＋
答
CSS 动画默认是无限循环（animation-iteration-count: infinite）。如果你想让动画只执行一次或几次，在复制的代码中找到 animation-iteration-count 属性，把 infinite 改成 1（执行一次）或 3（执行三次）。也可以设置 animation-fill-mode: forwards 让动画停在最后一帧。所有修改都是直接在 CSS 里改数值，不需要额外工具。
隐私保证所有计算与处理均在你的浏览器本地完成，输入数据不会上传服务器，也不会保存或共享。