transition必须写在常态选择器中，因为浏览器仅在属性变化时触发过渡；若只写在:hover里，移出时会硬切回初始值，无法平滑缩放。

必须把 transition 写在常态选择器里，否则移出时直接跳回原尺寸，根本谈不上“平滑”。

transition 为什么必须写在非 hover 状态下

浏览器只在属性值变化时触发过渡；如果 transition 只写在 .grid-item:hover 里，那常态下 transform 没有过渡定义，鼠标一移出，scale() 就硬切回初始值（哪怕你写了 transform: scale(1)），视觉上就是“啪”一下缩回去。

• transition 必须放在 .grid-item 基础规则中，例如：transition: transform 0.28s cubic-bezier(0.34, 0.69, 0.1, 1);
• hover 里只负责改 transform 值，比如 transform: scale(1.12);
• 基础规则中必须显式声明 transform: scale(1);，不能省略或留空——否则首次 hover 可能从 none 跳到 scale(1.12)，造成初始抖动

缩放不导致 Grid 布局变形的关键控制点

Grid 容器本身不会因子项 transform 重排，但缩放后若内容溢出、锚点偏移或父容器未约束，就会视觉“变形”：错位、遮挡、换行异常。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 给 .grid-item 加 overflow: hidden;，防止图片或文字撑破边界
• 显式设置 transform-origin: center;（或按需设为 top left），避免默认锚点在某些浏览器中计算偏差
• 确保 Grid 容器的 gap 足够容纳缩放后的额外空间，比如放大 1.12 倍时，gap: 12px 比 gap: 8px 更安全
• 不要在 hover 中同时改 width/height 或 margin，这些会触发布局重排，和 transform 的合成层动画冲突

兼容性与性能避坑细节

现代浏览器对 transform: scale() 支持良好，但边缘场景仍有差异，尤其涉及嵌套 Grid 或 flex 子项时。

• 旧版 Safari（≤15.6）对 cubic-bezier() 在 transform 过渡中偶有卡顿，可降级用 ease-out 保稳
• 如果 .grid-item 内含图片，加 will-change: transform; 可提前提示合成层提升，但别滥用——仅在频繁悬停的卡片上加
• 避免在 hover 中叠加多个 transform 函数（如 scale(1.12) translateY(-2px)）再单独写 transition: transform 0.3s，务必合并成单条 transform 声明，否则后写的会覆盖前一个
• 移动端无 hover，所以该效果本质是桌面优先；如需兼顾触摸设备，得配合 @media (hover: hover) 做条件启用

真正难的不是让缩放动起来，而是让缩放前后都严格守在 Grid 分配的轨道里——这要求你既控制好元素自身的渲染行为，又得尊重 Grid 容器的布局契约。漏掉 overflow: hidden 或忘了 transform-origin，都可能让“平滑”变成“漂移”。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！