直接给::after加animation没反应，是因为必须设content: ""才能渲染伪元素，否则动画无效；父元素未设position: relative会导致定位错乱；简单动效用transition，复杂多阶段用@keyframes+animation。
为什么直接给 ::after 加 animation 可能没反应
因为 ::after 必须有 content 属性（哪怕只是 content: ""），否则它根本不会渲染，动画自然无效。另外，如果父元素没设 position: relative，而 ::after 又用了 position: absolute，那它的定位基准就可能是整个页面或某个祖先容器，导致动画位置飘移、错位甚至不可见。
transition 和 animation 该选哪个
看动效复杂度：
- 简单状态切换（比如下划线从 0→100% 宽度、遮罩从透明到半透明）——用
transition更轻量、更可控，性能也更好 - 多阶段变化（比如先缩放再旋转再位移、循环加载脉冲）——必须用
@keyframes+animation -
transition依赖伪类触发（如:hover），animation可以自动播放或控制循环，但无法响应交互状态切换
常见错误：把 transition: all 0.3s 往 ::after 上一塞，结果 opacity、transform、width 全部一起动，视觉混乱。应该只过渡真正需要变的属性，比如 transition: width 0.3s ease, opacity 0.3s ease。
定位不准导致动画“飞走”的解决办法
这是最常被忽略的环节。只要看到 ::after 没出现在按钮/链接下方，而是跑到了右上角或文字末尾外侧，基本就是定位上下文没建好。
- 父元素必须加
position: relative（不能是static默认值） -
::after必须设position: absolute，且至少明确left或top中的一个值（比如left: 0、bottom: 0） - 想让它完全覆盖父元素？补全
top: 0; left: 0; right: 0; bottom: 0;，再配z-index: -1或z-index: 1控制层级 - 想让它从中间展开？初始设
left: 50%; transform: translateX(-50%)，hover 时改width并重置transform: translateX(0)
opacity 和 transform 动画要特别注意的点
opacity 和 transform 是仅有的两个能触发硬件加速且不触发重排的 CSS 属性，适合做高频动画。但它们也有陷阱：
-
opacity: 0的元素仍占事件流（鼠标能穿过去），如果想禁用交互，得加pointer-events: none；hover 时再恢复 -
transform: scale(0)虽然视觉消失，但元素尺寸仍是原始大小，可能影响布局或点击热区；此时建议配合opacity一起用 - 别在
::after上滥用will-change: transform—— 只在真正卡顿的动画里加，否则反而拖慢渲染 - 移动端要注意：某些旧版 Safari 对
transform+absolute组合有渲染 bug，加backface-visibility: hidden可缓解
真正难的不是写几行 keyframes，而是让 ::after 始终待在它该在的位置、用对属性、不干扰交互——这些细节漏掉一个，动画就容易失焦或失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
