使用 splittype 库实现逐字符动画时，若未正确设置字体排版与容器样式，动画完成后文字常发生位置跳动；根本原因是字体连字（kerning）和弹性布局宽度不确定性导致 dom 重排。
使用 splittype 库实现逐字符动画时，若未正确设置字体排版与容器样式，动画完成后文字常发生位置跳动；根本原因是字体连字（kerning）和弹性布局宽度不确定性导致 dom 重排。
在基于 SplitType + GSAP 的动态文字轮播动画中（如标题逐词切换），你可能会遇到这样一个典型问题：动画结束瞬间，新文本“突兀地向下或向上跳动一下”，尤其在大字号、非等宽字体（如 Inter、Helvetica Neue）或 Flex 布局下更为明显。这并非动画逻辑错误，而是由浏览器渲染机制引发的视觉偏移。
? 根本原因分析
SplitType 在执行 new SplitType(el) 时，会将文本拆分为独立 <span></span> 元素并插入 DOM；调用 split.revert() 时则还原为纯文本。此过程若遇以下任一情况，即触发重排（reflow）并造成跳动：
- ✅ 字体连字（kerning）启用：默认
font-kerning: auto会使字母间距随上下文动态调整，而拆分前后字符脱离原始文本流，导致间距计算不一致； - ✅ 父容器无明确宽度约束：当
.mask或其祖先（如.layout-ws）处于 Flex 容器中且未设width或flex-basis，SplitType插入的<span></span>可能短暂撑开容器，引起回流。
✅ 正确解决方案（两步到位）
1. 禁用字体连字（关键！）
在所有可能被 SplitType 处理的文本容器上，强制关闭连字：
.mask,
.primary-h1,
.primary-h1 span {
font-kerning: none;
}⚠️ 注意：
font-kerning: none是 SplitType 官方文档明确要求的必备样式（见文档），不可省略。
2. 为 Flex 容器设定明确宽度
确保 .layout-ws（或其直接父级）具备稳定宽度基准，避免因子元素尺寸变化引发伸缩：
.layout-ws {
width: 100%; /* 必须显式声明 */
font-kerning: none; /* 一并加入此处，保证继承 */
box-sizing: border-box;
padding: clamp(16px, 5%, 30px);
}若 .hero .left 是 Flex 容器，也建议为其添加 min-width: 0 防止 flex item 基于内容过度收缩：
.left {
min-width: 0; /* 防止 flex item 内容撑宽影响布局稳定性 */
}? 完整优化后的 CSS 片段（推荐直接采用）
/* 关键修复样式 */
.mask,
.primary-h1,
.primary-h1 span {
font-kerning: none;
}
.layout-ws {
width: 100%;
font-kerning: none;
box-sizing: border-box;
padding: clamp(16px, 5%, 30px);
}
.left {
min-width: 0;
}? 补充建议
- 若仍存在微小跳动，可对
.mask添加line-height: 1并确保vertical-align: bottom（尤其当多行文本参与动画时）； - 避免在动画过程中修改
font-size、line-height或letter-spacing—— 这些属性变更会直接触发重排； - 使用
will-change: transform对.mask span提前提示合成层，提升动画性能（非必需但推荐）：
.mask span {
will-change: transform;
}通过以上配置，文字动画将平滑收尾，彻底消除“跳帧”感，无论字体大小、类型或视口宽度如何变化，均保持视觉一致性。这是构建专业级动态标题体验不可或缺的基础规范。
