::first-letter 的 font-size 无法动画，因规范限制且渲染机制特殊；应改用真实 span 包裹首字母并应用 transition 或 keyframes 实现可靠动画效果。
直接对 ::first-letter 使用 transition 或 @keyframes 控制字体大小，通常不会生效——因为 ::first-letter 是一个**伪元素**，且浏览器对其可动画属性支持非常有限。CSS 规范明确指出：绝大多数 CSS 属性在 ::first-letter 上不可过渡或动画，包括 font-size、color（部分浏览器例外）、line-height 等。
为什么 font-size 动画在 ::first-letter 上失效？
根本原因有两点：
-
规范限制：CSS Pseudo-Elements Level 4 明确将
::first-letter的可继承/可动画属性范围收得很窄；font-size不在其列。 - 渲染机制特殊：首字母常涉及行内布局重排（如下沉、大写、浮动等），浏览器为避免频繁重排，默认禁用其动画能力。
替代方案：用 wrapper + span 模拟首字母
最可靠的做法是**放弃依赖 ::first-letter 动画，改用真实 DOM 元素包裹首字母**，再对其应用 transition 或 keyframes：
- HTML 中手动或脚本提取首字符，包一层
<span class="first-letter">A</span> - CSS 中对该
span设置display: inline-block（确保能设宽高/变换） - 然后正常使用
transition: font-size 0.3s ease或@keyframes
示例：
立即学习“前端免费学习笔记（深入）”；
<p><span class="first-letter">H</span>ello world</p>
.first-letter {
display: inline-block;
font-size: 2rem;
transition: font-size 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
p:hover .first-letter {
font-size: 3.2rem;
}
如果必须用 ::first-letter，可尝试的“降级兼容”技巧
某些效果可间接实现（但非真正 font-size 动画）：
-
用 transform 缩放模拟：
transform: scale(1.8)支持 transition，视觉上接近放大首字母（注意会缩放整个字形，包括描边、阴影） -
配合 opacity + 字体粗细变化：
font-weight和opacity在部分浏览器中可过渡，增强“强调感” -
仅在支持的浏览器中启用：Chrome 115+ / Safari 17+ 对
::first-letter color有基础 transition 支持，但font-size仍不行 —— 别依赖它
自动化首字母包裹（推荐前端脚本辅助）
避免手写 HTML，可用轻量 JS 自动处理：
document.querySelectorAll('p').forEach(p => {
const text = p.textContent;
if (text && text.length > 0) {
const first = text[0];
const rest = text.slice(1);
p.innerHTML = `<span class="first-letter">${first}</span>${rest}`;
}
});
配合 CSS 即可统一控制所有段落首字母动画，稳定、可控、无兼容陷阱。
