动画必须写在::after自身选择器中，因其为独立渲染层，不继承父元素:hover状态；需在基础样式设transition或animation，配合transform/opacity等gpu加速属性，并确保定位准确、pointer-events:none。
必须把动画属性写在 ::after 本身上，而不是父元素的 :hover 规则里；否则动画不触发或行为异常。
为什么动画写在父元素 hover 里会失效
伪元素 ::after 是独立渲染层，它的样式状态不会自动继承父元素的伪类变化。比如你写 .btn:hover { transform: scale(1.05); }，这只影响按钮本身，::after 完全无感知。动画要生效，必须直接控制伪元素的属性，并在它自己的选择器中声明 transition 或 @keyframes。
常见错误现象：::after 完全不动、闪一下就结束、或者只在鼠标移入瞬间跳变，没有过渡过程。
- 过渡属性（如
transition: transform 0.3s ease）必须写在::after的基础样式里，不能只放在:hover::after中 - 如果用
@keyframes，animation属性也必须写在::after上，且需配合animation-fill-mode: forwards保持最终状态（如需要） - 避免在
:hover中仅改opacity却没设初始opacity: 0—— 这会导致首次悬停时无动画，因为起始值未定义
哪些属性适合动画且性能较好
不是所有 CSS 属性都适合动画。::after 作为覆盖层，应优先使用 GPU 加速属性，避免触发布局重排（reflow）或重绘（repaint）。
推荐组合：
-
transform（scale、translate、rotate）—— 最安全，强制走合成层 -
opacity—— 轻量，支持硬件加速 -
background-color或border-color—— 可接受，但别频繁切换渐变色
应避免：
-
width/height（触发布局计算，尤其在inset: 0下易错位） -
top/left（除非已设position: absolute且有明确基准，否则易抖动） -
box-shadow大范围变化（高开销，旧版 Safari 易掉帧）
定位不准导致动画偏移的典型修复
::after 动画看起来“飞出去了”或“卡在角落”，90% 是定位上下文或初始尺寸没控好。
- 父容器必须有
position: relative（否则absolute伪元素会相对于 viewport 定位） -
::after必须设content: ""+position: absolute+ 至少两个方向的偏移（如inset: 0或top: 0; left: 0; width: 100%; height: 100%） - 若用
transform: scale(0)做缩放入场，记得加transform-origin: center，否则默认从左上角展开 - 如果父元素有
padding且你想让伪元素贴内容区而非盒区，别用inset: 0，改用top: [padding-top]; left: [padding-left]; width: calc(100% - [padding-left] - [padding-right]); height: calc(100% - [padding-top] - [padding-bottom])
容易被忽略的交互与兼容性细节
动画做完，用户点不到按钮？页面在 iOS 微信里闪退？这些都不是玄学。
-
::after默认会响应鼠标事件，遮住父元素点击区域 —— 必须加pointer-events: none，仅当它本身需要交互（如做点击反馈层）才例外 - 旧版 Safari 对
inset支持不全，iOS 微信内置浏览器至今不认inset: 0；稳妥写法是显式写top: 0; right: 0; bottom: 0; left: 0 - 动画频繁触发时（如快速进出），加
will-change: transform到::after可提升帧率，但别滥用 —— 它会提前创建合成层，吃内存 -
content: " "（空格）看似等价于content: ""，但在某些浏览器中因空白处理逻辑不同，会导致伪元素不渲染或尺寸异常，坚持用content: ""
真正难的不是写出动画，而是让 ::after 在各种边界条件下稳定响应、不抢事件、不闪、不卡、不误伤可访问性。这些细节一旦漏掉，调试成本远高于写动画本身。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
