transition必须写在默认状态而非:hover中，否则移出时因无过渡声明而跳变；需显式设初始transform和transition-property，优先用transform实现居中以触发GPU加速。
transition 实现居中过渡必须写在默认状态，不是 :hover 里
很多人把 transition 写在 :hover 里，结果鼠标移入有动画、移出却“啪”一下跳回原位。这是因为浏览器只对 :hover 中定义的样式做过渡，而默认状态没声明过渡行为，移出时就直接硬切。
正确做法是把 transition 放在元素的基础选择器里（比如 .box），让进出都走同一套过渡逻辑：
-
transition必须包含至少一个可过渡属性，比如transform、opacity、left/top（但不推荐后者） - 优先用
transform: translate(-50%, -50%)配合绝对定位居中，而不是靠margin或left/top+ 百分比 —— 前者触发 GPU 加速，更流畅 - 如果居中依赖
top和left，记得初始值和 hover 值都得是具体数值（不能一个是50%、一个是auto），否则过渡失效
用 transform + absolute 实现平滑居中过渡
这是最稳定、性能最好的方式。核心是：父容器设 position: relative，子元素用 position: absolute + transform: translate(-50%, -50%) 居中，再通过修改 transform 的其他部分（比如 scale 或 rotate）或配合 opacity 触发过渡。
示例（点击或悬停时从左上角平滑飞入居中）：
立即学习“前端免费学习笔记（深入）”；
.center-trigger {
position: relative;
height: 300px;
}
.box {
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100px;
background: #3498db;
/* 关键：过渡写在这里 */
transition: transform 0.4s ease-out, opacity 0.3s;
}
.box.centered {
transform: translate(-50%, -50%) scale(1.2);
opacity: 1;
}
/* 初始状态 */
.box:not(.centered) {
transform: translate(-200%, -200%) scale(0.6);
opacity: 0.4;
}-
transform所有分量（translate、scale、rotate）可同时过渡，且不会触发重排 - 避免混用
top/left和transform—— 浏览器可能丢帧或计算冲突 - 如果用 JavaScript 控制 class 切换，确保 class 名变更能被浏览器及时识别（不要用
style.transform直接写内联样式来替代 class）
animation + @keyframes 实现一次性居中入场
当需要更复杂的路径（比如先放大再平移，或带弹跳效果），@keyframes 比 transition 更可控。但注意：它默认不响应交互，需靠 JS 或伪类触发。
常见错误是动画结束后元素“弹回”原始位置 —— 这是因为没设 animation-fill-mode: forwards：
- 必须加
forwards，否则动画播完立即恢复初始状态 -
animation-duration不能为0s，否则不播放（哪怕你只想靠 JS 控制时间） - 如果希望悬停触发，用
:hover+animation，但要确保元素初始状态和动画 0% 帧一致，否则会有“闪一下” - 想支持反复触发？加
animation-play-state: paused初始态，JS 中改running；或者用animation-iteration-count: 1+ class 切换重播
居中过渡容易被忽略的兼容性坑
IE10+ 和现代浏览器都支持 transition 和 transform，但细节差异仍存在：
- 旧版 Safari（iOS transform: translate(-50%, -50%) 的解析不稳定，建议补
-webkit-transform -
will-change: transform可提前告知浏览器该元素将动画，但滥用会导致内存占用上升，只在频繁动画的元素上加 - 移动端 Safari 对
transition的cubic-bezier()支持弱于 Chrome，复杂曲线建议降级为ease-out或用steps() - 如果父容器用了
overflow: hidden，而动画中元素超出边界再缩回，某些 Android WebView 会渲染错乱 —— 改用clip-path或确保动画全程在可视区内
真正难的不是写出第一版居中动画，而是让不同设备、不同触发方式（hover / click / scroll）下，过渡起止帧对齐、无跳变、不卡顿。动手前先明确：是单次入场？循环动效？还是双向交互？选对机制比堆参数重要得多。
