伪元素必须设置非空content属性才能渲染并触发动画；动画属性需直接作用于伪元素自身；需配合display和定位控制尺寸与上下文。
伪元素必须有 content 属性才能触发渲染
浏览器不会渲染 ::before 或 ::after，除非它们定义了非空的 content。这是动画失效最常见的原因——你写了 animation，但元素根本没生成。
-
content: ""是最常用写法，即使只是占位也要显式声明 -
content: none或未声明content→ 伪元素不参与渲染 → 动画完全不执行 - 若需隐藏内容但保留占位，可用
content: " "（注意是空格字符，不是空字符串）
动画属性必须作用于伪元素自身，不能靠父元素继承
伪元素是独立的渲染节点，animation、transform、opacity 等必须直接写在 ::before 或 ::after 规则里，父元素上设置无效。
button {
position: relative;
}
button::after {
content: "";
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
background: #007bff;
opacity: 0;
animation: fade-in 0.3s forwards;
}
@keyframes fade-in {
to { opacity: 0.2; }
}
- 不能把
animation写在button上指望它“传给”::after - 伪元素若使用
display: none，动画也会被跳过；改用opacity: 0+visibility: hidden更可控 - 需要触发动画重播时（如 hover 反复进入），得用
animation-name: none临时清空再恢复，或用 JS 切换 class
transform 和 filter 动画在伪元素上表现稳定，但要注意定位上下文
伪元素默认是 inline-level，且没有尺寸，直接加 transform: scale() 或 rotate() 往往看不到效果——因为没渲染盒模型。必须配合 display 和定位控制。
- 推荐组合：
display: block/inline-block+position: absolute（或fixed） - 若父元素没设
position: relative，absolute伪元素会相对于最近定位祖先，容易偏移 -
filter: blur()、grayscale()可直接生效，但部分旧版 Safari 对伪元素上的filter支持不稳定
hover 触发伪元素动画时，避免 layout thrashing 和重复触发
用 :hover::after 做悬停反馈很常见，但若动画依赖 width/height 等触发重排（reflow），性能会明显下降，且快速进出可能卡顿。
立即学习“前端免费学习笔记（深入）”；
- 优先用
transform和opacity——它们走合成层，不触发重排 - 避免在
@keyframes中写left/top，改用transform: translateX() - 快速连续 hover 会导致动画队列堆积，可加
animation-fill-mode: forwards+animation-play-state: paused配合 JS 精确控制
content 就不存在，没显式尺寸和定位就动不起来，也没父元素兜底。每次加动画前，先检查这三件事，比调十遍 keyframes 更省时间。 
