CSS动画结束后元素不消失，是因为动画默认不改变可见性状态；需在@keyframes末帧设opacity:0或visibility:hidden，配合animation-fill-mode:forwards保留样式，并用JS监听animationend事件设置display:none及pointer-events:none以彻底清理视觉、交互与语义。
动画结束后元素不消失，是因为 CSS 动画默认不改变元素的可见性状态；必须显式控制 opacity、visibility 或配合 JS 移除/隐藏 DOM 节点。
animation-fill-mode: forwards 只保留最后一帧样式，不自动隐藏
很多人以为加了 animation-fill-mode: forwards 就能让元素“消失”，其实它只是让动画结束后的 opacity、transform 等属性值保持住——如果最后一帧没设 opacity: 0 或 visibility: hidden，元素照样可见。
- ✅ 正确做法：在
@keyframes的to（或100%）里明确写opacity: 0或visibility: hidden - ❌ 错误写法：
@keyframes fadeOut { to { transform: scale(0); } }—— 缩到 0 但没设透明或隐藏，视觉上可能残留像素或触发重绘异常 - ⚠️ 注意：
visibility: hidden在动画中不能过渡（无中间态），所以更适合和opacity配合用：先opacity: 0完成淡出，再用 JS 在animationend里设visibility: hidden或display: none
display: none 不能直接参与 CSS 动画
display 是离散属性（block/none 等），浏览器无法插值，所以 transition 或 @keyframes 里写 display: none 是无效的。想真正移除元素，得靠 JS 监听动画结束事件。
- ✅ 推荐流程：
opacity: 1 → 0动画 → 监听animationend→ 执行element.style.display = 'none' - ⚠️ 坑点：
animationend事件在使用animation-fill-mode: forwards时才可靠触发；若动画被中途取消（如类名快速切换），可能不触发 - ? 补充：如果元素有多个动画（比如同时跑
fadeIn和slideOut），animationend会按每个动画分别触发，需用event.animationName判断是哪个
opacity: 0 后元素仍可交互，需额外处理 pointer-events
仅设 opacity: 0 不等于“禁用”，元素仍在文档流中、占位、响应点击/焦点——这常导致意外触发事件或影响可访问性。
立即学习“前端免费学习笔记（深入）”；
- ✅ 安全组合：
opacity: 0; pointer-events: none;（动画最后一帧就加上） - ⚠️ 注意：
pointer-events: none不能动画，只能在关键帧里硬切；不要试图对它做transition - ♿ 可访问性提醒：屏幕阅读器仍会读取
opacity: 0元素的内容，如需彻底隐藏语义，应加aria-hidden="true"或后续用display: none
最易被忽略的是：动画结束 ≠ 元素状态清理完成。opacity: 0 只解决视觉，pointer-events: none 解决交互，display: none 解决布局与语义。三者常需分阶段配合，而不是指望一个 CSS 属性包打天下。
