使用visibility与animation结合可实现元素淡入淡出并保留布局空间，关键是在opacity为0后再设置visibility:hidden，避免动画失效或显示异常。
在 CSS 中，将 animation 与 visibility 结合使用来控制元素的显示与隐藏，可以实现更精细的动画效果和可见性管理。但需要注意两者的交互逻辑，避免出现动画不执行或显示异常的问题。
visibility 的特性
visibility: hidden 会让元素不可见，但依然占据文档流中的空间。与 display: none 不同，它不会完全从渲染树中移除元素。
- visibility 可以被 transition 和 animation 控制
- 即使 visibility 为 hidden，CSS 动画仍会正常运行（前提是元素未被 display: none）
- 常用于配合 opacity 实现“渐隐后隐藏”的效果
结合 animation 实现淡入淡出并隐藏
通过 keyframes 定义动画，在动画结束时设置 visibility，可以实现“先淡出，再不可见”的流程。
@keyframes fadeOut {
0% {
opacity: 1;
visibility: visible;
}
100% {
opacity: 0;
visibility: hidden;
}
}
.element {
opacity: 1;
visibility: visible;
animation: fadeOut 1s forwards;
}
这里 forwards 确保动画结束后保持最终状态（opacity: 0, visibility: hidden）。
立即学习“前端免费学习笔记（深入）”；
反向操作：显示时先 visible 再 fadeIn
如果想让元素重新显示，需注意 visibility 必须在动画开始前设为 visible，否则元素处于不可见状态，动画可能“看不见”。
@keyframes fadeIn {
0% {
opacity: 0;
visibility: visible; /* 关键：提前设为 visible */
}
100% {
opacity: 1;
}
}
.element.show {
animation: fadeIn 1s forwards;
opacity: 1;
visibility: visible;
}
若使用 JavaScript 控制，建议先添加类触发 visible，再启动动画：
element.style.visibility = 'visible';
setTimeout(() => {
element.classList.add('show');
}, 10); // 小延迟确保样式生效
常见问题与解决方案
- 动画不执行：检查是否用了 display: none，这会中断动画。应优先用 visibility 或 opacity 配合动画
- visibility 切换太早：确保在 opacity 完全为 0 后才设为 hidden，否则会突然消失
- transition 无法跨 display 变化：display: none 无法过渡，建议用 visibility + opacity 组合
基本上就这些。合理利用 visibility 和 animation 的组合，可以在保留布局空间的同时，实现平滑的显隐动画。关键是掌握好 visibility 的切换时机，避免“看不见动画”或“动画失效”的情况。
