容器查询动画必须显式声明 container-type（推荐 inline-size），@keyframes 需全局定义且不可嵌套，动画响应容器尺寸变化而非视口，命名容器可隔离多组逻辑。
容器查询动画必须配合 container-type 声明
没有显式声明 container-type 的元素，@container 规则完全不会生效——这是最常被忽略的前提。CSS 容器查询不是“自动探测尺寸”，而是依赖你手动标记哪些元素是“容器”。动画本身不改变这一前提，但很多人误以为加了 @keyframes 就能触发响应。
必须用 container-type: inline-size（推荐）或 container-type: size，前者只监听宽度变化，开销小、兼容性好（Chrome 105+、Safari 16.4+、Firefox 119+）；后者需同时监听宽高，且要求元素有明确的 contain: layout style paint，否则可能被忽略。
-
container-type: inline-size是绝大多数动画场景的首选，比如卡片宽度缩放时触发动画 - 不要在
display: inline元素上设container-type，它需要块级格式化上下文（BFC），加display: contents或display: block才有效 - 若父容器本身是 flex/grid 项，需确认其尺寸是否受弹性约束影响——有时
min-width或flex-basis会压制容器查询的触发时机
@container 内不能直接定义 @keyframes
@keyframes 是全局规则，不能嵌套在 @container 块里。常见错误写法：@container (min-width: 400px) { @keyframes slide-in { ... } } —— 这会导致整个 @container 规则被浏览器丢弃，连带里面的 animation 声明也失效。
正确做法是：先在顶层定义 @keyframes，再在 @container 查询块中通过 animation 属性调用：
@@keyframes fade-up {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
@container (min-width: 400px) {
.card {
animation: fade-up 0.3s ease-out forwards;
}
}
- 动画名称（如
fade-up）必须拼写完全一致，大小写敏感 - 如果在多个
@container条件下复用同一动画，但想控制时长/延迟，直接在对应查询块里覆盖animation-duration或animation-delay即可 - 避免在
@container中写animation: none来“关闭”动画——这会中断正在运行的动画实例；改用animation-play-state: paused更可控
动画触发时机取决于容器尺寸变更而非视口
容器查询动画的触发逻辑和媒体查询完全不同：它响应的是**容器自身尺寸变化**（例如父 div 被 JavaScript 改变宽度、CSS Grid 列宽重排、或响应式布局折叠），而不是浏览器窗口缩放。这意味着你在 DevTools 里拖动 viewport，动画很可能不执行——除非那个容器的尺寸真的跟着变了。
- 调试时，优先检查容器元素的 computed
container-type是否为inline-size，以及 computedcontainer-name（如果有命名）是否匹配查询条件 - 用
ResizeObserver手动监听容器尺寸变化，配合console.log验证是否真有 resize 事件发生，比盲猜更可靠 - 动画本身无过渡缓动（easing）问题，但若容器尺寸在动画执行中持续变化（如拖拽调整侧边栏），可能导致
animation属性被反复重置，出现跳帧——此时应考虑加animation-fill-mode: forwards锁定终态
container-name 可用于隔离多组动画逻辑
当一个页面里有多个需要独立响应的容器（比如侧边栏 + 主内容区 + 卡片网格），用匿名容器（即只写 container-type）容易互相干扰。这时给容器命名，再在 @container 查询中精确指定，能避免样式污染。
HTML 中设 style="container-name: sidebar;"，CSS 中写 @container sidebar (max-width: 320px) { ... }。注意：container-name 必须是标识符（不能含空格、引号、特殊符号），且大小写敏感。
- 命名容器支持逗号分隔，如
container-name: hero, featured，可在多个查询中复用 - 若某容器同时匹配多个
@container规则（比如既叫card又满足(min-width: 300px)），所有匹配规则都会生效，层叠顺序按 CSS 普通规则处理 - 动画属性本身不参与容器查询的“匹配计算”，所以即使
animation值不同，只要容器尺寸满足条件，就会应用对应块里的全部声明
opacity 变化而变化。很多看似该动的动画不动，问题往往出在容器本身没真正 resize，或者 container-type 被父级 contain 或 display 设置意外屏蔽了。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
