使用@keyframes定义0%到100%的完整旋转关键帧，配合animation简写属性、transform-origin精准控制中心，并添加will-change优化性能，可实现流畅可控的加载动画。

直接用 @keyframes 定义旋转关键帧，再通过 animation 应用到元素上，就能做出流畅、可控、性能好的旋转加载动画。核心不在“炫酷”本身，而在于旋转逻辑清晰、中心准确、触发稳定、不干扰布局。

定义旋转关键帧（必须写全起止状态）

用 @keyframes 明确写出从 0° 到 360° 的完整过程，浏览器才能平滑插值：

• 推荐写法：0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); }
• 也可用 from/to，但语义略弱，且无法扩展中间帧（比如加停顿或变速）
• 避免只写 transform: rotate(360deg) —— 这不是动画，只是静态变形

应用动画并控制行为（时长、循环、速度曲线）

把关键帧绑定到元素时，建议写全 animation 简写属性，确保关键参数不遗漏：

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

• animation: spin 0.8s linear infinite; 是最稳妥的写法
• infinite 必须显式声明，否则只转一圈就停
• 时长选 0.6–1.2s 较自然；太短易闪，太长显卡顿；线性（linear）适合加载指示，ease-in-out 更适合交互反馈

确保旋转中心准确（transform-origin 很关键）

默认旋转中心是元素盒模型中心（50% 50%），但若元素不是正方形、或用了 border 做环形，中心容易偏移：

• 圆环类加载器（如 border-radius: 50%）建议显式设 transform-origin: center;
• 图片或图标元素可加 display: block; margin: 0 auto; 配合居中旋转
• 绕左上角转？写 transform-origin: 0 0;；绕右下角？写 transform-origin: 100% 100%;

优化性能与视觉表现（让旋转更顺、更专业）

真实项目中，光“能转”不够，还要兼顾渲染效率和观感细节：

• 给旋转元素加 will-change: transform;（仅对频繁动画元素），提示浏览器提前启用 GPU 加速
• 避免在动画中修改 width、height、left、top 等触发布局的属性
• 想增加层次感？可叠加 opacity 脉冲、scale(0.95)→scale(1) 微缩放，或用 ::before/::after 做双层不同速旋转
• 颜色过渡更柔和？配合 border-color 或 background 的渐变色动画，但注意别拖慢帧率