用 transform: translateY() 实现按钮悬停上浮更高效，因只触发重绘；需显式声明 transition，位移量建议 -2px 至 -6px，配合 ease 时序和伪元素阴影可提升真实感，慎用 will-change，兼容性靠 Autoprefixer 处理。

用 transform: translateY() 实现按钮悬停上浮

直接改 margin-top 或 top 会触发重排，性能差；transform 只触发重绘，更平滑。关键不是“动多少”，而是“怎么动才不卡”。

基础写法：

.btn {
  transition: transform 0.2s ease;
}
.btn:hover {
  transform: translateY(-4px);
}

• ease 比 linear 更自然，有缓入缓出感
• 位移量建议控制在 -2px 到 -6px 之间，太大显得跳脱
• 必须显式声明 transition，否则 hover 时是突变，没有动画

为什么加 will-change: transform 有时反而更卡？

它只是提示浏览器“这个元素要变换了”，但滥用会导致内存占用上升、合成层过多。真实项目中，90% 的按钮不需要加。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

• 只在动画频繁或复杂（比如同时缩放+旋转+位移）时考虑加 will-change: transform
• 加了之后要测试真机滚动是否变卡，特别是 iOS Safari
• 如果按钮本身已有 transform（如 rotate），再加 will-change 容易触发意外的图层提升

兼容性与 fallback：IE11 和旧版 Safari 怎么办？

IE11 支持 transform 但不支持 transform: translateY() 的简写语法（需加 -ms- 前缀），而 Safari 8–9 对 transition 的 timing function 解析有偏差。

立即学习“前端免费学习笔记（深入）”；

• 不用手动写前缀，用 PostCSS + Autoprefixer 自动补全即可
• 若项目必须支持 IE11，可加降级：.btn:hover { margin-top: -4px; }，但要确保父容器有 overflow: hidden 防止布局抖动
• 旧 Safari 中 ease-out 可能表现过急，换成 cubic-bezier(0.34, 1.56, 0.64, 1) 更稳

和伪元素配合做“阴影上浮”效果更真实

纯位移看起来像飘起来，但现实中物体会带阴影变化。加一层 ::after 模拟加深/扩散的阴影，视觉反馈更强。

.btn {
  position: relative;
  transition: transform 0.2s ease;
}
.btn::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 8px;
  background: rgba(0,0,0,0.15);
  border-radius: 4px;
  opacity: 0;
  transition: all 0.2s ease;
  z-index: -1;
}
.btn:hover {
  transform: translateY(-4px);
}
.btn:hover::after {
  opacity: 1;
  transform: scaleY(1.3);
}

• 阴影用 ::after 而非 box-shadow，因为后者无法独立缩放
• z-index: -1 确保阴影在按钮下方，不影响点击区域
• 注意：如果按钮用了 border-radius，::after 的圆角也要同步，否则边缘露白

实际动效是否“轻盈”，不取决于位移值大小，而在于 timing function 是否贴合物理惯性，以及是否避免隐式重排。很多团队调半天动画，最后发现卡顿源头是 hover 时顺便改了 height 或触发了 offsetTop 读取。