直接在动画中修改 padding 会触发重排，因其属于影响几何尺寸的盒模型属性，导致浏览器重算布局并打断 GPU 合成；安全动画属性仅有 transform 和 opacity。
为什么直接在动画里改 padding 会触发重排
因为 padding 属于盒模型中直接影响元素几何尺寸的属性，只要它的值在动画帧之间变化，浏览器就必须重新计算该元素及其兄弟、祖先的布局位置——这个过程就是重排（reflow）。哪怕只是 padding: 10px → 16px，也会打断 GPU 合成流程，导致动画掉帧、页面抖动。
用 transform 替代 padding 动画的常见误判场景
很多人以为“只要不用 width 或 left 就安全”，但其实 padding 和 margin 同样危险。真正安全的动画属性只有两个：transform 和 opacity。它们不参与 layout 阶段，只走合成层。
- ❌ 错误写法：
@keyframes expand { from { padding: 8px; } to { padding: 24px; } } - ✅ 正确思路：把“视觉上撑开”的效果，换成容器位移或缩放，例如用
transform: scale(1.2)模拟内边距增大感，或用transform: translate()移动子内容来制造留白错觉 - ⚠️ 注意：不要混用——哪怕动画里只写了一次
padding: 0，整个@keyframes就降级为 CPU 渲染
响应式中需要动态调整 padding 时的替代方案
如果业务逻辑确实依赖 padding 变化（比如深色模式切换、移动端折叠面板展开），那就不能把它放进动画，而应通过非动画方式控制：
- 用媒体查询切换：
@media (max-width: 768px) { .card { padding: 0.75rem; } }—— 断点触发，不连续执行，安全 - 用 CSS 变量 +
clamp()：padding: clamp(8px, 4vw, 24px);—— 浏览器内部插值，不触发 layout - JS 控制时，避免逐帧修改：
el.style.padding = '16px';改成一次性加 class：el.classList.add('p-lg');，样式由 CSS 批量定义 - 若必须 JS 动态读写，确保读操作（如
getBoundingClientRect()）和写操作（如改padding）分离，并包裹在requestAnimationFrame中
box-sizing: border-box 对 padding 动画的影响
它不会让 padding 动画变安全，反而可能掩盖问题。设了 border-box 后，padding 改变仍会触发布局重算，只是元素总宽高看起来“没变”——但内部内容压缩、换行、行高连锁反应照常发生，尤其在文本密集区域容易引发 Layout Shift。
立即学习“前端免费学习笔记（深入）”；
真正要防的是动画过程中任何对 padding 的连续变更。哪怕你用了 border-box，只要在 @keyframes 或 transition 里写了 padding，就等于主动邀请重排上门。
