container queries 不支持直接触发动画，只能通过条件应用样式，再依赖 CSS transition 或 animation 响应属性变化；需显式设置 container-type，并优先用 transition 实现尺寸变更时的平滑动画。
container queries 本身不支持直接触发动画
别被“容器查询”这个词误导——@container 规则只能用于条件性地应用样式，它不是事件监听器，也不会在容器尺寸变化时自动触发重绘或播放动画。你不能写 @container (min-width: 300px) { .box { animation: slide-in 0.3s; } } 并期望每次容器缩放都重播动画。
真正起作用的是：当容器尺寸跨越某个断点时，浏览器会重新计算并应用匹配的样式块，如果该块里定义了 animation 或 transition，且目标属性（如 opacity、transform）发生了变化，才会产生动画效果。
所以关键不是“用 container query 写动画”，而是“用 container query 控制哪些样式生效”，再靠 CSS 动画/过渡机制响应这些样式变更。
必须显式启用 container 类型才能生效
HTML 元素默认不是容器，@container 查询对它完全无效。你得先用 container-type 显式声明——最常用的是 inline-size（仅响应宽度变化），极少用 size（宽高都响应，开销大）。
立即学习“前端免费学习笔记（深入）”；
-
container-type: inline-size;就够了，99% 的响应式动画场景只关心宽度 - 不要给
body或main这类全局容器设 container，容易误触发；优先选组件级 wrapper，比如卡片、网格项、侧边栏区域 - 如果用了
container-name，记得在@container中用@container name (min-width: ...)引用，否则查不到
动画触发依赖属性变更，不是断点切换本身
常见错误是以为只要断点变了，动画就自动重放。实际上，CSS 动画默认只在元素首次匹配规则时播放一次（除非设 animation-fill-mode: forwards 或用 animation-play-state 控制）。要实现“每次尺寸变化都重播”，得靠 transition + 属性切换，或者用 JS 监听 resize 事件手动重置动画。
更稳妥的做法是：用 transition 替代 animation，让尺寸变化直接驱动平滑过渡：
/* 正确示例：用 transition 响应 container query 切换 */
.card {
container-type: inline-size;
padding: 1rem;
transition: padding 0.2s ease, transform 0.2s ease;
}
@container (min-width: 400px) {
.card {
padding: 1.5rem;
transform: scale(1.05);
}
}这样当容器从 380px 拉宽到 420px，.card 的 padding 和 transform 值改变，transition 就自然生效。
注意浏览器兼容性和回退方案
Chrome 105+、Firefox 119+、Safari 16.4+ 支持 container queries，但 Safari 对嵌套容器和 container-name 的处理仍有小 bug。生产环境务必加降级：
- 用
@supports (container-type: inline-size)包裹 container query 规则，避免老浏览器解析失败 - 基础样式（小屏）写在外部，只把大屏增强样式放进
@container，保证无 JS 也能正常显示 - 动画类名不要依赖 container query 单独存在——比如
.card--expanded仍可通过 JS 手动添加，作为 fallback
真正难的不是写对语法，而是判断哪些交互值得用 container query 驱动：它适合组件级、局部、尺寸敏感的微动画（比如卡片内图标大小、文字行高、间距缩放），不适合全页布局切换或复杂序列动画。一旦逻辑变重，JS + ResizeObserver 反而更可控。
