推荐用 :hover + transform: scale() 配合 transition 实现文字缩放动画，无需 keyframes；需设 display、transform-origin 等细节以确保兼容与效果。
hover 时用 transform: scale() 实现文字缩放动画
直接在 :hover 伪类里写 transform: scale(1.2) 并配合 transition 就能实现平滑缩放，不需要 keyframes。keyframes 更适合复杂多段动画，纯悬停放大缩小反而容易过度设计。
-
transform: scale()必须搭配transition才有动画效果，否则是瞬时跳变 - 推荐用
transform: scale(1.1)而非scale(1.5)，文字放大太猛会挤占布局、影响可读性 - 避免同时设置
font-size和transform: scale()，两者叠加会导致渲染模糊或重排问题
为什么不用 @keyframes + animation？
因为 animation 默认不响应 hover 状态切换（除非用 animation-play-state: paused/running 控制），而 :hover + transition 天然支持正向/反向双向过渡，代码更短、行为更可控。
-
@keyframes zoomIn { from { transform: scale(1); } to { transform: scale(1.2); } }定义后，仍需用animation: zoomIn 0.3s ease;绑定，但离开时不会自动缩回——除非再写一套zoomOut并用animation-direction: reverse，徒增复杂度 -
transition自动处理进入和退出，只需声明一次：例如transition: transform 0.2s ease-in-out; - 移动端 touch 设备上，
:hover行为不稳定，若需兼容，应额外考虑:focus-within或 JS 切换 class
实际可用的 CSS 写法示例
button {
padding: 8px 16px;
font-size: 14px;
border: none;
background: #007bff;
color: white;
cursor: pointer;
/* 关键：启用硬件加速并定义过渡 */
transform: translateZ(0);
transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
button:hover {
transform: scale(1.12);
}
-
transform: translateZ(0)是常见 trick，触发 GPU 加速，减少缩放时的闪烁或锯齿 -
cubic-bezier(0.25, 0.46, 0.45, 0.94)比默认ease更轻快，适合小范围缩放 - 如果文字是内联元素（如
），需先设display: inline-block或inline-flex，否则transform可能不生效
容易被忽略的细节
缩放中心点默认是元素中心（transform-origin: 50% 50%），对按钮或块级元素没问题，但对左对齐文字可能造成“晃动感”。这时要显式调整原点：
- 让文字以左上角为基点缩放：
transform-origin: top left; - 若容器有
overflow: hidden，放大后边缘可能被裁切，需预留足够 padding 或改用min-width防止收缩挤压 - 某些旧版 Safari 对
transform在inline元素上的支持不一致，稳妥起见统一加display: inline-block
