content 不可动画因其非 DOM 节点且不可插值，transition 或 @keyframes 对其无效；应改用 opacity 与 visibility 配合双伪元素叠层实现视觉过渡。
transition 为什么对 content 不生效
因为 content 是 CSS 生成内容，不属于 DOM 节点，浏览器不把它当作可动画属性。你写 transition: content 0.3s 完全没反应——不是写错了，是根本不可动画。
常见错误现象：content 突然跳变、hover 时文字“闪一下”、用 @keyframes 试图动画 content 但无效。
- 只有可计算、可插值的 CSS 属性才能被
transition或@keyframes驱动，content不在其中 - 伪元素（
::before/::after）本身不能被 JS 直接操作，所以也不能靠 class 切换来“触发”过渡 - 部分浏览器（如旧版 Safari）甚至对
opacity+content切换的渲染有竞态，导致文字残留或重绘异常
用 opacity + visibility 模拟 content 过渡
真正能过渡的是 opacity 和 visibility。思路是：两个伪元素叠在一起，一个显示一个隐藏，靠透明度淡入淡出切换视觉内容。
使用场景：按钮悬停文字替换（如“下载”→“已添加”）、状态标签切换（“未读”→“已读”）、图标文字组合的平滑提示更新。
立即学习“前端免费学习笔记（深入）”；
- 必须给两个伪元素相同的定位（
position: absolute+top/left对齐），否则会错位 -
visibility: hidden配合opacity: 0才能确保不占空间又不触发重排；单用opacity: 0仍会响应事件、影响布局 - 过渡时间建议设在
0.2s–0.35s，太长显得迟滞，太短（
示例关键片段：
button::before {
content: "下载";
opacity: 1;
visibility: visible;
transition: opacity 0.25s, visibility 0.25s;
}
button.downloaded::before {
opacity: 0;
visibility: hidden;
}
button.downloaded::after {
content: "已添加";
opacity: 0;
visibility: hidden;
transition: opacity 0.25s 0.05s, visibility 0.25s 0.05s;
}
button.downloaded::after {
opacity: 1;
visibility: visible;
}
JS 触发时机与 class 切换顺序
直接 JS 改 element.className 会导致两个伪元素同时开始过渡，造成重叠或空白帧。必须控制先后节奏。
容易踩的坑：classList.toggle("downloaded") 一气呵成，但浏览器可能把两个伪元素的样式变更合并进同一帧，失去错峰效果。
- 先加 class 移除旧内容（触发
::before的 fade-out），再用setTimeout(..., 0)或queueMicrotask延迟加新内容的 class - 避免用
getComputedStyle强制重排来“等过渡结束”，这会阻塞主线程，尤其在低端设备上卡顿明显 - 如果状态频繁切换（比如快速连点），需加防抖或禁用交互，否则
opacity值可能被中间态覆盖，出现半透明叠加
兼容性与性能注意点
IE 完全不支持 transition 伪元素，但现代项目基本可忽略；真正要小心的是 iOS Safari 的合成层处理——opacity 动画在某些版本中会意外触发 will-change 行为，导致文字模糊。
- 加
backface-visibility: hidden或transform: translateZ(0)可强制硬件加速，但会增加内存开销，小图标文字没必要 - 伪元素内容含中文时，部分安卓 WebView 对
opacity渐变更敏感，建议用0.2s而非0.3s减少模糊感 - 如果页面已有大量伪元素动画，注意 Chrome 的 layer limit（每帧最多约 32 个合成层），超了会回退到 CPU 渲染，掉帧
最麻烦的其实是设计师给的动效稿里写了“文字滑入+缩放”，这时候得当场沟通：滑入和缩放都不可用于 content，能做的只有淡入淡出。不是技术不行，是规范不许。
