用transform: translateY()实现hover跳动，避免margin/top引发重排；需加translateZ(0)或will-change触发GPU加速，防闪烁；多阶弹跳用@keyframes配cubic-bezier缓动；注意SVG/display、iOS/Android兼容性及暗色模式适配。
hover时用transform实现图标跳动，别用margin或top
直接改margin或top触发动画会引发重排（reflow），性能差，尤其在移动端容易卡顿。必须用transform: translateY()这类只触发重绘（repaint）的属性。
常见错误是写成top: -5px再加transition，看起来能动，但滚动或高负载下明显掉帧。
- 跳动推荐用
transform: translateY(-8px)配合ease-in-out缓动 - 动画时长控制在
0.3s以内，超过0.4s会显得拖沓 - 务必加上
will-change: transform（仅对频繁交互元素），让浏览器提前优化渲染层
关键CSS代码：避免transform闪烁和布局抖动
单纯加transform可能在部分Chrome版本中出现1px闪烁，根源是未启用硬件加速或未隔离图层。
正确写法要同时满足三点：
立即学习“前端免费学习笔记（深入）”；
- 给图标容器加
transform: translateZ(0)或will-change: transform - 确保父容器没有
overflow: hidden且未裁剪子元素边界（否则跳动时会被截断） - 动画定义放在默认状态，hover只改
transform值，不要增删class来回切换
示例：
.icon {
display: inline-block;
transition: transform 0.25s ease-in-out;
transform: translateZ(0); /* 触发GPU加速 */
}
.icon:hover {
transform: translateY(-6px) translateZ(0);
}多阶跳动（如弹跳效果）要用@keyframes而非纯hover
单纯transform: translateY()只能上下平移，做不出真实弹跳感（先快下、再慢上、带回弹）。这时必须用@keyframes配合animation。
注意：不能在:hover里直接写@keyframes，得先定义动画，再引用。
- 用
cubic-bezier(0.2, 0.8, 0.4, 1)模拟弹性缓动，比ease-out更自然 - 动画
animation-fill-mode: forwards可保持结束态，但跳动类动画通常设为both或不设，避免hover离开后还悬停在高位 - 如果图标是SVG，确保
display为inline-block或block，否则transform可能失效
兼容性与真机测试要点
老版Safari（iOS 12以下）对transform动画有渲染bug，比如跳动偏移量不准或首帧卡住。不是加-webkit-前缀就能解决。
- 必须测试真机，特别是iPhone SE（2020）这类小屏低性能设备
- Android WebView（尤其微信内置）对
will-change支持不稳定，可降级为只用transform: translateZ(0) - 如果图标用了
font-icon（如IconFont），需确认line-height和vertical-align没干扰位移基准线，否则跳动会“歪”
最易被忽略的是：跳动动画在暗色模式下可能因背景对比度变化而显得突兀，建议加个轻微filter: brightness(1.05)微调，但别过度。
