letter-spacing 和 word-spacing 无法直接 transition，因二者属离散布局属性，触发重排而非重绘，浏览器不支持插值动画；可用 transform scale 模拟或 JS 动态 span + margin-right 过渡。
纯 CSS 无法对 letter-spacing 或 word-spacing 做「过渡动画」——浏览器不支持这些属性的动画插值，直接写 transition: letter-spacing 0.3s 会静默失效。
为什么 letter-spacing 不能直接 transition
这不是浏览器 Bug，而是 CSS 动画规范明确限定：只有「可计算、可插值」的属性才支持 transition 和 @keyframes。而 letter-spacing 在多数引擎中被归类为「离散布局属性」，触发的是重排（reflow），不是重绘（repaint），因此无法平滑过渡。
- 实测 Chrome/Firefox/Safari 均无视
transition: letter-spacing声明，控制台无报错但无动画 -
word-spacing同理，行为一致 - 例外：极少数旧版 Safari（≤14）曾短暂支持，但不可依赖
可用的替代方案：transform + scale 模拟
用 transform: scale(x, 1) 拉伸文字容器宽度，再配合 overflow: hidden 遮挡溢出部分，视觉上近似「字间距变大」。关键在于把「间距变化」转化为「缩放+裁剪」。
示例：
立即学习“前端免费学习笔记（深入）”；
.spaced-text {
display: inline-block;
overflow: hidden;
transition: transform 0.3s ease;
}
.spaced-text:hover {
transform: scale(1.2, 1);
}
- 优点：兼容性好（IE11+），能触发 GPU 加速
- 缺点：文字实际未变宽，只是被横向拉伸；若容器宽度固定，可能截断末尾字符
- 补救：hover 时同步微调
width或用min-width预留空间
真正可靠的动态间距控制：CSS 自定义属性 + JavaScript
如果必须精确控制每个字符间距并实现过渡，得放弃纯 CSS 方案，改用 JS 动态生成 <span> 包裹每个字符，再对每个 span 应用 margin-right 并过渡：
<p id="animated-text">Hello</p>
<script>
const el = document.getElementById('animated-text');
el.innerHTML = el.textContent.split('').map(c =>
`<span style="margin-right: 0;">${c}</span>`
).join('');
el.style.setProperty('--space', '0.2em');
el.style.transition = ' --space 0.4s ease';
el.addEventListener('mouseenter', () => {
el.style.setProperty('--space', '0.6em');
});
</script>
<style>
#animated-text span { margin-right: var(--space); }
</style>
- 注意：
margin-right是可过渡属性，且不影响文本流布局（相比letter-spacing更可控） - 性能提示：字符数超过 50 时，大量
span可能引发重排压力，建议加will-change: margin-right - 移动端需测试 touch 事件触发是否及时
最常被忽略的一点：所谓「文本间距过渡」，90% 的实际需求其实是「悬停时轻微呼吸感」，而非精确到像素的动画。这时候用 transform: scale(1.02) + opacity: 0.98 组合，比硬啃 letter-spacing 过渡更轻量、更稳定。
