用 width/height 做加载动画卡顿是因为触发重排，应改用 transform: scale() 并配合 will-change 或 translateZ(0) 提升合成层，确保初始态与 0% 帧一致，Safari 中避免 scale(0) 改用 scale(0.001)，并通过 class 切换控制启停。
animation 里用 width/height 变化做加载动画为什么卡顿
因为 width 和 height 属于会触发重排（reflow）的属性，浏览器每次变化都要重新计算布局，帧率一掉就肉眼可见卡。尤其在中低端设备或复杂页面里，transform: scale() 是更稳妥的选择——它走合成层，GPU 加速，不打断渲染流水线。
实操建议：
- 把尺寸变化逻辑从
width/height挪到transform: scale(0.8)这类属性上 - 确保动画元素有
will-change: transform或已提升为合成层（比如加了transform: translateZ(0)） - 避免在
@keyframes中同时改width和transform，混用容易让浏览器降级回软件渲染
keyframes 动画循环时盒子“闪一下”再开始
这是初始状态没对齐动画第一帧导致的。比如 @keyframes 从 scale(0) 开始，但元素默认是 scale(1)，动画一启动就跳变。
实操建议：
- 手动设初始样式，和
@keyframes的0%帧保持一致，例如：element { transform: scale(0.5); } - 用
animation-fill-mode: forwards锁定结束帧，但注意它不影响起始帧，起始仍需手设 - 如果用
animation-delay做延迟启动，也要同步检查初始态是否匹配0%定义
盒子缩放动画在 Safari 上不生效或错位
Safari 对 transform 的解析更严格，尤其当父容器有 overflow: hidden 或未设置 transform-style: flat 时，缩放可能被裁剪或失真。
实操建议：
- 给动画元素加
transform-origin: center，显式定义缩放中心，避免 Safari 默认按左上角算 - 父容器若含
overflow: hidden，尝试加transform: translateZ(0)强制创建新层叠上下文 - 避免在
@keyframes中写scale(0)—— Safari 对 0 缩放支持不稳定，改用scale(0.001)
用 CSS 自定义 loading 盒子，怎么控制启停和状态响应
CSS 动画本身没有“暂停/恢复”的运行时控制能力，全靠 class 切换来驱动，所以关键在 class 管理策略。
实操建议：
- 定义两个 class：
loading（带animation）和loading--paused（仅含animation-play-state: paused） - JS 控制时，不要直接操作
style.animationPlayState，统一用element.classList.toggle('loading--paused') - 如果要配合数据加载状态，建议用
data-loading="true"属性 + 属性选择器写动画规则，比 class 更易与 React/Vue 响应式联动
动画真正难的不是写几行 @keyframes，而是让缩放中心稳、起始帧不跳、各端不掉帧、JS 能干净接管——这些细节堆起来，才决定用户看到的是“流畅加载”，还是“卡一下再动”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
