容器查询动画不能直接用 transition，因为 @container 仅启用/停用规则而无中间状态；需通过自定义属性（如 --is-wide）映射断点状态，并结合 color-mix()、calc() 等函数驱动可过渡样式。
容器查询动画为什么不能直接用 transition
因为 @container 本身不触发重排或样式过渡，它只是根据容器尺寸匹配 CSS 规则；transition 只响应元素自身属性（如 width、opacity）的数值变化，而容器查询切换时，CSS 规则只是“启用/停用”，没有中间状态可插值。
所以直接写：
section {<br> @container (min-width: 400px) {<br> background-color: blue;<br> transition: background-color 0.3s;<br> }<br>}——是无效的。浏览器不会在容器尺寸跨越断点时自动触发动画。
正确做法：用自定义属性 + transition 驱动动画
核心思路是把容器查询的“状态”映射为一个可过渡的 CSS 自定义属性（例如 --is-wide），再让其他样式依赖这个变量，并对其设置 transition。
- 在容器上用
@container控制--is-wide的值（比如0或1） - 目标子元素用
calc()或color-mix()等函数把该变量转为可过渡的样式（如背景色、缩放、透明度） - 对目标属性显式声明
transition
示例（渐变背景动画）：
.card {<br> --is-wide: 0;<br> transition: background-color 0.4s ease;<br> background-color: color-mix(in srgb, #ff6b6b 70%, #4ecdc4 30%);<br>}<br><br>@container (min-width: 480px) {<br> .card { --is-wide: 1; }<br>}<br><br>.card {<br> background-color: color-mix(<br> in srgb,<br> #ff6b6b calc(70% - var(--is-wide) * 30%),<br> #4ecdc4 calc(30% + var(--is-wide) * 30%)<br> );<br>}
立即学习“前端免费学习笔记（深入）”；
@container 查询范围与 transition 性能隐患
容器查询生效的前提是父容器设置了 container-type（如 inline-size），且该容器必须有明确的尺寸约束（比如 width、max-width 或弹性布局下的有效收缩行为）。否则 @container 规则不会被解析，变量不会更新，transition 就永远没机会触发。
- 避免在
display: contents或未设container-name的祖先上使用@container，会导致查询失效 -
transition作用的属性尽量选opacity、transform、background-color这类可 GPU 加速的，别用height或margin，否则容器尺寸反复重排会卡顿 - 多个容器查询断点叠加时，
--is-wide类变量建议用数字编码（如--breakpoint: 0 / 1 / 2），避免布尔值嵌套导致逻辑混乱
兼容性与降级处理要点
目前 @container 仅在 Chromium 111+、Firefox 119+ 和 Safari 16.4+ 支持；旧浏览器会完全忽略 @container 块，但自定义属性和 transition 仍存在，所以必须主动降级。
- 用
@supports (container-type: inline-size)包裹容器查询逻辑，把基础样式写在外面作为 fallback - 不要依赖 JS 检测容器尺寸来模拟 —— 容器查询本质是 CSS 引擎原生能力，JS 监听 resize 无法精确匹配渲染时机，容易错帧或漏触发
- 如果项目需支持 Safari 16.3 及更早版本，可改用
resize-observer+requestAnimationFrame手动同步变量，但复杂度陡增，且无法复用 CSS transition 时间函数
最简降级写法：
.card {<br> background-color: #ff6b6b;<br> transition: background-color 0.4s;<br>}<br><br>@supports (container-type: inline-size) {<br> .card-container { container-type: inline-size; }<br> @container (min-width: 480px) {<br> .card { background-color: #4ecdc4; }<br> }<br>}
注意：上面这种写法虽无变量插值，但至少保证了断点切换有基础过渡，比完全无动画更稳妥。真正需要平滑插值的场景，还是得走自定义属性路线——那部分逻辑最容易被忽略的是 calc() 中单位混用（比如 px 和无单位数相加），会导致整个表达式计算失败，变量值变成无效，动画就静默失效了。
