图标悬停不升起是因为 transform-origin 未设为 bottom center 且元素未脱离文档流；需设 position: absolute、bottom: 0，并配合 transition 和 will-change 优化动画。
hover 动画为什么图标不动？检查 transform-origin 和定位方式
图标悬停不升起，大概率是没设对 transform-origin 或元素本身没脱离文档流。默认情况下，transform: translateY(-100%) 是相对于元素自身中心点移动的，不是从底部往上“升”。要实现“从底部升起”，得让变换原点落在底部边缘，并确保元素有明确的定位上下文。
- 给图标容器加
position: relative，图标本身加position: absolute; bottom: 0; left: 0; - 设置
transform-origin: bottom center（不是center或top） - 悬停时用
transform: translateY(-100%)才能真正“从底边开始上移” - 别忘了加
transition: transform 0.3s ease-out，否则动画不生效
用 CSS transition 实现平滑上升，但别漏掉 will-change
单纯加 transition 有时会卡顿，尤其在低性能设备或复杂布局里。浏览器默认不会为 transform 提前启用 GPU 加速，需要手动提示。
- 在图标元素上加
will-change: transform（仅在必要时加，别滥用） -
transition必须写在常态样式里，不是只写在:hover中，否则首次悬停无过渡 - 避免用
top/bottom做动画属性——重排开销大；transform是唯一推荐的平移动画属性 - 时间函数建议用
ease-out或cubic-bezier(0.22, 0.61, 0.36, 1)，比linear更自然
图标升起后被父容器裁剪？overflow 和 z-index 很关键
图标一上升就“消失一半”，通常是父容器设置了 overflow: hidden，或者层级被其他元素盖住。
- 检查图标父级是否带
overflow: hidden；如有，要么去掉，要么改用overflow: visible - 给图标元素加
z-index: 1（需配合position: relative或absolute才生效） - 如果父容器是 flex 容器，注意
align-items: center可能干扰垂直定位，改用align-items: flex-start更可控 - 用浏览器开发者工具的“3D 视图”功能可快速判断是否被裁剪或层级错乱
想兼容老浏览器？别用 transform 的百分比位移
IE11 支持 transform，但对 translateY(-100%) 解析不稳定——它会按父容器高度算，而不是自身高度。结果就是升得太高或太低。
立即学习“前端免费学习笔记（深入）”；
- 稳妥做法：用固定像素值，比如
translateY(-40px)，前提是图标高度固定 - 若图标尺寸不固定，可用 JS 动态读取
offsetHeight并设内联样式，但增加复杂度 - 不要指望
vh/em在这里可靠；%在 IE 中行为不一致 - 如必须支持 IE，建议放弃“从底部升起”效果，改用透明度+轻微上移更安全
