使用::before和::after伪元素结合transition与@keyframes，可在不改变HTML结构的前提下实现悬停提示、动态边框、波浪线等流畅动画效果，通过控制初始状态与目标状态的过渡，并优先采用transform和opacity以提升性能，确保动画自然且高效。
在CSS中，伪元素 ::before 和 ::after 能够为元素添加额外的视觉层，而无需增加HTML结构。结合CSS动画，可以实现丰富且平滑的视觉效果，比如悬停提示、动态边框、渐显遮罩等。关键在于合理使用 transition 和 @keyframes，并控制伪元素的初始与目标状态。
利用 transition 实现平滑的 before/after 动画
通过 transition 可以让伪元素的属性变化更自然，例如透明度、位置或尺寸的变化过程变得流畅。
常见做法是将伪元素默认设为不可见（如 opacity: 0），在 hover 时变为可见（opacity: 1），并用 transition 控制过渡时间。
- 设置伪元素的初始状态为隐藏或缩放为0
- 使用 transition 定义变化属性和持续时间，如
transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) - 在父元素 hover 时触发伪元素的显示或位移
示例：创建一个按钮，悬停时从左侧滑出背景条纹
立即学习“前端免费学习笔记（深入）”；
使用 @keyframes 制作循环动画
对于需要连续播放的动画，比如呼吸光效、加载指示器，可使用 @keyframes 配合伪元素实现。
此时不需要用户交互，动画自动运行，适合用在 loading 状态或强调元素上。
- 定义关键帧动画，控制 opacity、transform 或背景位置
- 将动画应用到 ::before 或 ::after 伪元素
- 使用
animation属性设置时长、延迟、重复方式
示例：文本下方波浪线动画
.animated-underline {
position: relative;
display: inline-block;
padding-bottom: 6px;
}
.animated-underline::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 2px;
background: #ff5722;
transform: scaleX(0);
transform-origin: center;
animation: waveLine 1.5s infinite ease-in-out;
}
@keyframes waveLine {
0%, 100% { transform: scaleX(0.3); }
50% { transform: scaleX(1); }
}
优化动画性能与视觉体验
虽然伪元素动画灵活，但不当使用可能导致重绘频繁或卡顿。建议关注以下几点：
- 优先使用
transform和opacity，它们由GPU加速，性能更好 - 避免对
left、top等触发布局重排的属性做高频动画 - 设置
will-change: transform可提升复杂动画的渲染效率 - 控制动画持续时间，一般 0.3s–0.6s 更符合用户感知流畅性
基本上就这些。合理利用 ::before 和 ::after 结合 transition 或 keyframes，能做出简洁又高级的动效，关键是控制好状态变化节奏和性能平衡。
