伪元素上直接写 animation 无效，因默认无 content 和渲染盒模型；需设 content、可动画属性及 display/position；content 不可动画，须用 JS 切换类名实现文字变化。
伪元素上直接写 animation 无效？先确认是否触发了渲染
很多情况下，::before 或 ::after 加了 animation 却没效果，根本原因是伪元素默认没有尺寸或内容，浏览器不将其视为可动画的渲染节点。必须确保它有 content（哪怕只是 content: ""），且至少具备一个可动画的属性（如 opacity、transform、background-color）和明确的显示状态（比如 display: block 或通过 position 脱离文档流）。
-
content属性是强制的——没有它，伪元素不会生成 - 避免只设
width/height却不设display或position，否则可能因无盒模型而被忽略动画 - 若用
transform动画，建议同时加will-change: transform提升性能（尤其在频繁重绘时）
动画关键帧里修改 content？不行，它不是可动画属性
content 是 CSS 中少数明确不可动画的属性之一，规范中定义为“not animatable”。试图在 @keyframes 里改变 content: "a" → content: "b" 不会过渡，只会突变（且多数浏览器直接忽略）。
- 需要切换文字内容？改用 JS 控制类名，配合不同伪元素的
content值 - 想实现打字效果？用
width+overflow: hidden模拟，或结合ch单位与steps()计时函数 - 图标切换（如箭头翻转）？优先用
transform: rotateY(180deg)，而非替换content
用 transition 还是 animation？取决于触发方式
伪元素动画通常分两类场景：响应式触发（如 hover）适合 transition；独立循环或复杂时序（如加载指示器）必须用 @keyframes + animation。
- hover 触发的缩放/颜色变化：
transition: transform 0.2s, color 0.3s更轻量、更可控 - 无限旋转的 loading 图标：
animation: spin 1s linear infinite，其中@keyframes spin { to { transform: rotate(360deg); } } - 注意：伪元素的
transition必须在伪元素自身声明，不能靠父元素触发后“继承”
@keyframes slide-in {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.element::after {
content: "→";
animation: slide-in 0.4s ease-out forwards;
}
兼容性陷阱：IE 不支持伪元素上的 animation，但支持 transition
IE11 及以下完全忽略伪元素的 animation 声明（即使写了也无反应），但对 transition 支持尚可。如果项目需兼容 IE，所有伪元素动画逻辑都得降级为 hover + transition，或用 JS 插入真实 DOM 元素替代。
立即学习“前端免费学习笔记（深入）”；
- 现代项目（Chrome/Firefox/Safari/Edge 79+）可放心使用
animation于伪元素 - 检查是否意外用了 IE-only 的语法（如
-ms-transform）导致其他浏览器解析异常 - 移动端 Safari 对
will-change在伪元素上的表现不稳定，建议测试真机
content，或多一个未声明的 display，整个动画就静默失效。 
