letter-spacing 不支持平滑过渡，因其属离散型属性，浏览器无法插值动画；可用 transform: scaleX() 模拟字距变化，配合 transform-origin 和 transition 实现兼容性良好的视觉效果。
letter-spacing 本身不能直接做平滑过渡——浏览器不支持对它进行插值动画，设了 transition: letter-spacing 0.3s 看起来“没反应”，不是你写错了，是它根本不可动画。
为什么 letter-spacing 过渡无效
这个属性属于“离散型 CSS 属性”，和 display、font-size、line-height 类似，浏览器无法在两个值之间生成中间帧。比如从 letter-spacing: 0px 到 2px，不会逐像素渐变，而是直接跳变。
- Chrome / Safari / Firefox 均明确不支持
letter-spacing的 transition 或 animation - DevTools 里能看到 transition 被标记为 “invalid” 或静默忽略
- 即使加了
will-change: letter-spacing，也无济于事
替代方案：用 transform: scale() 模拟字间距变化
真正能平滑过渡的是 transform。你可以把文字包裹进一个 span，对其做轻微横向缩放，视觉上等效于调字距，且完全可动画。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 初始状态：
transform: scaleX(1) - 悬停/激活时：
transform: scaleX(1.03)（约等效 +1.5px 字距） - 必须配
transform-origin: left center，避免整体位移 - 注意：只对英文/等宽字体效果自然；中文字体慎用，可能拉伸失真
.text-spaced {
display: inline-block;
transform: scaleX(1);
transform-origin: left center;
transition: transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.text-spaced.active {
transform: scaleX(1.03);
}
更稳妥的纯 CSS 方案：改用 opacity + transform 组合切换
如果你要实现“文字逐字出现”或“节奏化展开”的效果（常被误称为“字间距过渡”），其实真正需要的是逐字符控制，这时 letter-spacing 依然不是解法。
立即学习“前端免费学习笔记（深入）”；
- 用 JavaScript 拆字并包裹每个字符，再配合
opacity和transform: translateX()实现 stagger 动画 - 纯 CSS 可退而求其次：对整段文字用
opacity: 0 → 1+transform: translateY(-4px) → 0，制造轻量浮现感 - 避免用
width或clip-path做“逐字露出”，它们触发重排，移动端掉帧明显
真正容易被忽略的一点：所谓“字间距过渡”，90% 的实际需求其实是想让标题更有呼吸感、或让按钮文字在 hover 时轻微舒展。这时候直接放弃 letter-spacing，改用 transform: scale() + text-shadow 微调清晰度，反而更可控、更兼容。
