CSS如何制作加载动画_利用关键帧改变盒模型尺寸-css教程-PHP中文网

用@keyframes改变width或height没效果，是因为这些属性不支持auto值插值、行内元素默认不响应、父容器尺寸不定导致计算失败；应改用transform或max-height替代。

css如何制作加载动画_利用关键帧改变盒模型尺寸

用 `@keyframes` 改变 `width` 或 `height` 为什么没效果？

CSS 动画里直接对盒模型尺寸（比如 width、height）做关键帧变化，常出现“不动”或“闪一下就停”的情况。根本原因是：这些属性默认不支持 CSS 过渡/动画的插值计算，除非元素有明确的初始和结束尺寸，且不能是 auto。

元素的 width 或 height 设为 auto 时，@keyframes 无法推算中间值，动画直接失效
行内元素（如 span）默认不响应 width/height，得先设 display: inline-block 或 block
如果父容器宽度不定（比如 flex 容器未设 min-width），子元素尺寸可能被挤压，动画表现异常

示例：这个不会动

@keyframes grow {
  from { width: 0; }
  to { width: 100px; }
}
.loading-bar { animation: grow 1s ease-in-out; }

→ 必须确保该元素有确定的 display 类型，且初始 width 不是 auto（哪怕设成 0px）

用 `transform: scaleX()` 替代 `width` 动画更稳

改变尺寸最可靠的方式不是调 width，而是用 transform。它不触发重排，性能好，且对 auto 尺寸也生效。

transform: scaleX(0) → scaleX(1) 模拟从无到有的横向展开，视觉上等效于 width 变化
同理，scaleY() 适合纵向加载条，scale() 适合圆形脉冲类动画
注意：transform 以元素中心为原点缩放，若要左对齐生长，加 transform-origin: left center;

@keyframes expand {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
.bar {
  transform-origin: left center;
  animation: expand 1.2s ease-out forwards;
}

`height` 动画卡顿？试试 `max-height` + `overflow`

真要靠高度变化做加载动画（比如下拉展开提示），直接 animating height 会强制浏览器每帧重排，尤其在内容多时明显掉帧。

用 max-height 替代 height：设一个“足够大但不过分夸张”的值（比如 500px），避免影响布局流
必须配 overflow: hidden，否则内容会溢出

CSS工具箱(专业版)
全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载
初始状态设 max-height: 0，动画结束加 forwards 保留在最终态
不要设 max-height: 10000px —— 过大会让浏览器插值计算变慢
若内容高度动态不可预估，优先考虑 transform: scaleY() + transform-origin: top center