根本原因是未设置transform-origin且未声明初始scale(1)，应统一设transform-origin: center、显式写transform: scale(1)并把transition写在默认状态中，避免用width/height缩放触发重排。
hover 触发缩放时元素突然跳动怎么办？
根本原因是 transform 缩放前未设置 transform-origin，导致默认以左上角为基点缩放，视觉上像“弹出”。更隐蔽的问题是：没给元素设初始 transform: scale(1)，某些浏览器（如 Safari）对首次 hover 的 scale() 渲染不一致。
- 统一设
transform-origin: center，让缩放围绕中心点 - 必须显式声明初始状态：
transform: scale(1)，不能省略 - 避免同时用
width/height动画缩放——它会触发重排，卡顿且无法硬件加速
transition 写在 :hover 里还是默认状态里？
写在默认状态（非 hover）里。如果只写在 :hover 中，鼠标移出时动画不会回退，缩放效果会卡住或直接跳回原尺寸。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
下载
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 正确写法：
element { transition: transform 0.3s ease; }（放在基础选择器里） - 错误写法：
element:hover { transition: transform 0.3s ease; }（移出无过渡） - 慎用
ease-in-out：缩放起始/结束阶段太慢，用户感知延迟；ease或cubic-bezier(.25,.46,.45,.94)更自然
多层嵌套元素 hover 缩放时子元素错位
常见于卡片内含图标、文字等子元素，缩放后子元素位置偏移或溢出。本质是父容器缩放后，子元素的 position: absolute 或 margin 值未随缩放同步调整。
- 优先用
transform: scale()替代width/height修改，它不影响文档流 - 子元素若用了
top/left定位，需配合transform: translate()调整，而非像素值硬编码 - 避免在缩放元素内部用
font-size动画——字体缩放和 transform 缩放叠加会导致模糊，尤其在 Windows Chrome 上
移动端 touch 设备 hover 不生效怎么兼容？
:hover 在 iOS 和部分 Android 浏览器中仅对可点击元素（如 a、button）临时生效，且存在 300ms 延迟。纯 CSS 无法可靠触发，必须结合交互逻辑。
- 给元素加
cursor: pointer并设touch-action: manipulation，提升 iOS 响应性 - 真需要触控缩放，改用
:active状态：element:active { transform: scale(0.95); } - 复杂场景建议用 JS 监听
touchstart/touchend切换 class，CSS 只负责动画定义
transform 不会缩放它们，视觉上会显得“变薄”或阴影脱离——得手动在 hover 里同步调整 border-width 和 box-shadow 的 blur 值。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
