伪类触发加载动画需按用户操作或状态变化启动，:hover/:active/:focus作门控信号；伪元素需设content、display及定位；移动端需JS配合class切换。
伪类触发加载动画的时机控制
加载动画不是一上来就转，得等用户操作或状态变化才启动。:hover、:active、:focus 这类伪类就是天然的开关。比如按钮点击时显示 loading 状态，不能靠 animation: spin 1s infinite 一直跑，而要用 :active::after 在按下瞬间激活动画。
常见错误是把动画写死在元素上，导致页面一加载就自转；正确做法是让伪类作为“门控信号”，只在需要时挂载动画。注意：:hover 不适用于移动端真机（无 hover 概念），若需兼容，得搭配 JavaScript 切换 class 或用 :focus-within 配合 tabindex。
-
:hover适合桌面端悬停反馈，如“加载中…”文字淡入 -
:active更贴近真实交互节奏，适合按钮按压态触发旋转图标 -
:focus对键盘用户友好，但需确保元素可聚焦（tabindex="0"）
::before 和 ::after 是加载动画的“免 DOM 占位符”
不用加 <span class="loader"></span>，一个空 div 就能靠伪元素撑起整个动画结构。关键点在于：content 必须设（哪怕为空字符串 ""），且伪元素要设 display（通常为 block 或 inline-block），否则不渲染。
典型陷阱是忘记设 position: absolute 和父容器的 position: relative，结果伪元素跑出布局流，遮不住主内容或定位错乱。旋转类动画还常漏掉 transform-origin，默认以左上角为原点，导致 spinner 偏移。
立即学习“前端免费学习笔记（深入）”；
- 环形旋转：用
::after画圆 +border: 3px solid transparent+border-top-color构成缺口圆 - 文字后缀加载：用
::after { content: " ·"; animation: pulse 1.2s infinite } - 双色旋转：两个伪元素叠在一起，各自设不同
border-color和animation-delay
@keyframes 动画必须匹配伪元素的 display 类型
伪元素默认是 inline，而 transform、width、height 等属性对 inline 元素无效。所以只要动画涉及尺寸或变形，就必须先设 display: block 或 inline-block。
另一个隐蔽问题是动画缓动函数选错。加载动画多数要“匀速感”，别用 cubic-bezier(.4, 0, .2, 1) 这种缓入缓出——它会让旋转起步慢、收尾拖沓，显得卡顿。直接用 linear 最稳妥。
- 旋转动画：优先用
transform: rotate()，比animation-timing-function调整更精准 - 透明度/缩放动画：可配合
opacity和scale()，但注意scale(0)会完全消失，可能影响占位 - 避免在
@keyframes里写display: none → block，浏览器不支持 display 的过渡动画
移动端真机下 :hover 失效，得用 class 切换兜底
CSS 伪类在 iOS Safari 和 Android Chrome 中对触摸事件基本不响应 :hover（除非用户“长按模拟”），所以纯靠伪类实现的加载动画在手机上大概率不触发。这不是 bug，是规范行为。
最轻量的解法是用 JavaScript 监听 touchstart，给元素加临时 class（如 is-loading），再用 .btn.is-loading::after 控制动画。这样既保留 CSS 动画性能，又绕过伪类限制。别试图用 @media (hover: hover) 去 hack，它只判断设备能力，不解决实际触发问题。
容易被忽略的是：动画结束后没清理状态。比如按钮点击后加了 is-loading，但请求完成没 remove，会导致动画一直转。务必在 JS 中配对控制 class 的增删。
