CSS如何制作简单的加载转圈动画_使用keyframe与animation

基础转圈动画需两步：先用@keyframes定义从rotate(0deg)到rotate(360deg)的关键帧，再用animation: spin 0.8s linear infinite绑定；避免触发布局属性、确保GPU加速、注意优先级与渲染条件。怎么用 @keyframes 写一个基础转圈动画核心就两步：定义旋转关键帧，再用 animation 绑定到元素上。别写成 0% → 100% 都设 transform: rotate(360deg)，那样浏览器不会动------得从 rotate(0deg) 到 rotate(360deg) 才有变化。@keyframes spin 必须带名字，且名字要和 animation-name 完全一致（区分大小写）推荐写 from / to，语义清晰，也避免漏写百分比符号别在 @keyframes 里写 display 或 width 这类触发布局的属性，容易卡顿@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); }}animation 的四个常用参数怎么配才不翻车光写 animation: spin 1s 很容易转一半停住、方向反了、或者点一下才动一次。真正控制行为的是后面几个隐式参数。animation-duration（比如 1s）必须设，否则默认是 0s，等于没动animation-iteration-count 不写就是 1，要循环得显式写 infiniteanimation-timing-function 推荐用 linear，不然默认 ease 会让转圈"先快后慢"，看起来像卡顿animation-direction 默认 normal，如果写了 alternate 又没配 infinite，第二轮就会反转然后停住.loader { animation: spin 0.8s linear infinite;}为什么加了 animation 却不转？常见失效场景不是代码写错，而是 CSS 优先级、渲染条件或硬件加速没跟上。尤其在移动端或低配设备上，不触发 GPU 加速时，transform 动画可能被降级为软件渲染，帧率掉到 10fps 以下，肉眼就"不动"。父容器设了 overflow: hidden 且子元素超出，可能裁掉动画区域（检查元素是否真被渲染出来）用了 position: static 的普通块级元素，但没设宽高或 border/content，结果 DOM 存在但尺寸为 0 ------ 转了个寂寞Chrome 旧版对 transform + will-change 组合敏感，加 will-change: transform 可能反而卡死，不如直接加 transform: translateZ(0) 强制 GPU 加速纯 CSS 转圈，border 法比 svg 法更轻量吗？看场景。如果只要一个简单圆圈，border + border-radius: 50% 确实够用；但想调颜色渐变、控制某一段空缺（比如进度感）、或适配深色模式自动换色，border 就硬编码死了。 灵办AI 免费一键快速抠图，支持下载高清图片