css动画需确保@keyframes名字合法（含短横线时必加引号）、旋转用transform:rotate()并配border-radius:50%、infinite与animation-fill-mode按需取舍、显隐用opacity+visibility而非display:none。
@keyframes 名字必须合法且调用时注意引号
名字里含短横线（比如 loading-spin）是合法的，但 CSS 规范要求这种标识符在 animation 属性中必须加单引号或双引号，否则浏览器会静默忽略——不报错、不动画、控制台也查不到线索。常见写法错误：animation: loading-spin 1s infinite，正确应为：animation: 'loading-spin' 1s infinite。纯字母数字的名字（如 spin）可省略引号，但统一加引号更稳妥。
旋转动画必须用 transform: rotate()，别碰 left/top/width
触发布局重排（layout）的属性会让动画卡顿甚至掉帧，left、top、width、height 都属于高代价属性。旋转必须走 transform: rotate()，它只影响合成层，由 GPU 加速。同时确保元素有明确尺寸和 border-radius: 50%，否则转起来不是圆。示例中常漏掉 border-radius，结果是个方块在原地扭动。
infinite 和 animation-fill-mode 的取舍要按场景来
加载动画分两类：一类是“持续转”，比如请求未完成时一直转，这时必须加 infinite；另一类是“只播一次”，比如页面初始渲染完成后的过渡提示，那就不能加 infinite，还得配 animation-fill-mode: forwards，否则动画一结束就跳回 0deg 状态。容易踩的坑是：写了 forwards 却忘了删 infinite，导致动画播完又从头开始。
opacity + visibility 比 display: none 更适合控制显隐
用 JS 控制加载状态时，别直接切 display: none，它会中断动画进程，再 show 时得重新触发。推荐组合：opacity: 0; visibility: hidden; 配合 transition: opacity 0.2s，JS 只需切换 .loading.active 类。这样动画状态保留在 DOM 中，切换更顺滑。如果元素还带交互（比如点击取消加载），记得加 pointer-events: none 避免误触。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
