本文详解因 display: flex 与 align-items: center 在悬停状态动态切换导致的文本位置跳变问题，通过统一布局上下文、移除高度硬编码、优化 transform 和媒体查询，实现全屏宽度下平滑过渡。
本文详解因 `display: flex` 与 `align-items: center` 在悬停状态动态切换导致的文本位置跳变问题，通过统一布局上下文、移除高度硬编码、优化 `transform` 和媒体查询，实现全屏宽度下平滑过渡。
在构建响应式悬停动画时，一个常见却容易被忽视的问题是：当容器尺寸随视口缩小时，原本流畅的文字淡入上浮效果突然出现“先向下跳再向上滑”的视觉抖动（stutter）。这种现象并非浏览器性能瓶颈所致，而是 CSS 布局机制与动画属性耦合不当引发的布局重排冲突。
根本原因在于：你将 display: flex 和 align-items: center 仅应用于 #seven-wonders:hover #additional-text，即仅在悬停时启用弹性布局居中。而 .additional-text 的内容高度会随视口宽度动态变化（小屏下换行增多 → 行高累积 → 实际高度显著增加）。例如：
- 宽屏（1400px+）：文本单行显示，自然高度 ≈ 40px，align-items: center 影响微弱；
- 小屏（370px）：文本强制折为 3–4 行，自然高度达 120px+，但悬停时仍被 height: 40px 强制截断 + align-items: center 拉伸居中 → 实际内容溢出上下各约 40px；
- 鼠标移出时，display: flex 瞬间移除，元素回归 position: absolute 默认流式布局，顶部定位 top: -100% 失效，内容立即“塌陷”回原始基线位置——造成肉眼可见的向下突跳。
✅ 正确解法：消除布局模式切换，统一使用 transform 控制位移
不再依赖 top 百分比 + display: flex 的组合，而是将所有定位逻辑交由 transform: translateY() 承担，并确保该属性在常态与悬停态下始终生效：
#additional-text {
color: #e7dfdf;
opacity: 0;
position: absolute;
top: 0; /* 固定基准线，不再用 top 百分比 */
left: 50%;
transform: translateX(-50%) translateY(-120%); /* 水平居中 + 初始隐藏在上方 */
width: 75vw;
text-align: center;
font-size: 17px;
transition:
transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
opacity 0.4s ease;
}
#seven-wonders:hover #additional-text {
opacity: 1;
transform: translateX(-50%) translateY(0); /* 平滑滑入中心 */
}同时，移除所有硬编码 height 和 display: flex 的悬停规则——它们正是抖动源头。.additional-text 应始终以 position: absolute + transform 进行动画，避免触发重排（reflow）。
? 配套优化建议：
-
媒体查询精细化控制：针对超小屏（≤450px），调整 transform 起始偏移量，防止文字被裁切：
@media (max-width: 450px) { #additional-text { font-size: 15px; width: 90vw; transform: translateX(-50%) translateY(-100%); /* 减小初始偏移 */ } } jQuery 动画可完全弃用：原 JS 中的 animate({top: "30%"}) 与 CSS transition 冲突，且 stop() 可能中断关键帧。建议删除该脚本，纯 CSS 实现更稳定、性能更好。
-
添加 will-change: transform, opacity（可选）：对 .additional-text 启用硬件加速，进一步提升小屏动画流畅度：
#additional-text { will-change: transform, opacity; }
? 总结：响应式动画的健壮性不取决于“更多百分比或 vw 单位”，而在于布局模型的一致性。避免在交互状态中切换 display 类型或依赖易变的 height，转而使用 transform 进行合成层动画——它不触发重排、不受盒模型影响、且在任意分辨率下行为确定。这一原则同样适用于按钮悬浮阴影、卡片翻转、导航菜单展开等各类交互动效。
