grid-item动画只能用transform、opacity、filter等合成层属性；改grid-column/row无效；hover缩放需单元素加transition和transform；JS stagger动画用CSS变量控制延迟；Firefox卡顿需加translateZ(0)或will-change。
grid-item 动画必须用 transform + opacity，别碰 grid-template-areas
直接对 grid-item 改 grid-column 或 grid-row 触发不了动画，浏览器不支持这些属性的过渡。真正能动的只有 transform、opacity、filter 这类合成层友好属性。
常见错误现象：写了 transition: grid-column 0.3s，完全没反应；或者用 animation 改 place-self，结果跳变无缓动。
- 动画目标只设在
grid-item上，不要动父容器grid的布局定义（比如grid-template-columns） - 想“移入/移出网格区域”，用
transform: translate()模拟位置变化，配合opacity控制显隐 - 确保触发动画的元素有
will-change: transform, opacity（可选，但复杂交互动画建议加）
hover 触发单个 grid-item 缩放动画的写法
这是最常搜的场景：鼠标悬停某个卡片，它放大并轻微上浮，其他项保持不动。关键在于隔离动画影响范围，避免重排。
错误做法：给整个 grid 容器加 hover，再用 :hover > * 批量操作子项——这会强制所有子项重绘，卡顿明显。
立即学习“前端免费学习笔记（深入）”；
- 只给目标
grid-item自身加:hover，例如.card:hover - 动画用
transform: scale(1.05) translateY(-4px)，别用width/height - 补上
transition: transform 0.2s ease, opacity 0.2s ease，两个属性写一起更稳 - 如果卡片内有文字或图标，加
backface-visibility: hidden防 iOS Safari 闪屏
`.card {
transition: transform 0.2s ease, opacity 0.2s ease;
}
.card:hover {
transform: scale(1.05) translateY(-4px);
z-index: 10;
}`JavaScript 控制 grid-item 进入/退出时的 stagger 动画
需要 JS 主动控制（比如列表加载、筛选显示），就得靠 classList + CSS 自定义属性驱动。CSS @keyframes 本身不支持动态延迟，得靠 JS 注入。
容易踩的坑：用 setTimeout 给每个 item 逐个加 class，时间一长就不同步；或者用 animation-delay 写死值，导致响应式断点下错乱。
- 用
item.style.setProperty('--delay', `${i * 0.1}s`)把延迟存为 CSS 变量 - CSS 里写
animation: fadeIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) var(--delay) forwards - 进出场用同一套动画名，但通过
animation-direction: reverse复用关键帧，减少重复代码 - 移除 item 前先加
is-exitingclass，用getComputedStyle等动画结束再remove()，避免 DOM 突然消失
Firefox 下 grid-item transform 动画偶尔卡顿的原因
不是代码问题，是 Firefox 对 transform 在某些 grid 布局上下文中的图层提升策略更保守。尤其当 grid-item 含 overflow: hidden 或嵌套 position: relative 时，合成层可能没建起来。
表现就是动画掉帧、拖影，Chrome 和 Safari 正常。
- 强制创建独立图层：给动画元素加
transform: translateZ(0)或will-change: transform - 避开
overflow: hidden和clip-path同时存在（二者叠加会让 Firefox 放弃硬件加速） - 如果用了
gap，确保父容器没设align-items: stretch且子项高度不一致——这种组合在旧版 Firefox 会触发频繁重排
动画本身没问题，只是浏览器实现细节差异大。真要全兼容，就得接受 Firefox 下略保守的加速策略。
