使用CSS animation与visibility结合可实现流畅的淡入淡出动画，通过opacity控制透明度过渡，visibility确保元素在隐藏时不可交互且合理控制显示状态，利用关键帧精确设置visibility切换时机，避免transition无法驱动visibility的问题，常用于模态框等需要平滑显隐的场景。
使用 CSS animation 与 visibility 结合，可以实现更精细的显示隐藏动画效果。visibility 属性控制元素是否可见，配合 opacity 和 animation 能做出平滑的淡入淡出，同时确保元素在隐藏时不占用布局空间或无法交互。
visibility 的特性
visibility: hidden 会让元素不可见，但仍然占据文档流中的空间。如果希望元素完全“消失”且不占位，需要结合 position 或 display 控制，但 display 不能被 animation 驱动。因此，常通过 visibility 配合 opacity 实现过渡动画。
常见做法：用 opacity 做视觉淡入淡出，visibility 控制实际是否可见，避免用户可点击隐藏元素。
实现淡入淡出动画
以下是一个简单的例子，让元素从完全透明到可见，并在隐藏时延迟设置 visibility：
立即学习“前端免费学习笔记（深入）”；
稿定抠图
AI自动消除图片背景
76 查看详情
.fade { opacity: 0; visibility: hidden; transition: opacity 0.3s ease;}.fade.show { opacity: 1; visibility: visible; animation: fadeIn 0.3s forwards;}.fade.hide { animation: fadeOut 0.3s forwards;}@keyframes fadeIn { to { opacity: 1; visibility: visible; }}@keyframes fadeOut { to { opacity: 0; visibility: hidden; }}
说明：
fadeIn 动画结束时 opacity 为 1，visibility 变为 visiblefadeOut 动画结束时 opacity 为 0，visibility 变为 hidden由于 visibility 在关键帧中变化，动画期间元素始终可渲染，避免突然消失
注意点与技巧
visibility 不支持 transition 过渡，只能靠 animation 关键帧来控制时间点。所以必须用 @keyframes 显式定义 visibility 的切换时机。
若想在隐藏后释放布局空间，可额外结合 height、max-height 或 margin 等属性做动画，但需注意：
height: 0 + overflow: hidden 可隐藏内容max-height 适合不定高度的元素（如内容动态）最终隐藏状态可加 pointer-events: none 防止交互
实际应用示例：模态框显示隐藏
“`css.modal { opacity: 0; visibility: hidden; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.modal.active {animation: showModal 0.4s forwards;}
@keyframes showModal {0% {opacity: 0;visibility: hidden;}1% {opacity: 0;visibility: visible;}100% {opacity: 1;visibility: visible;}}
.modal.inactive {animation: hideModal 0.4s forwards;}
@keyframes hideModal {0% {opacity: 1;visibility: visible;}99% {opacity: 0;visibility: visible;}100% {opacity: 0;visibility: hidden;}}
技巧：在 1% 处设置 visibility: visible，确保动画开始时元素已可渲染；隐藏时在 99% 仍保持 visible，防止提前消失导致动画中断。
基本上就这些，关键是利用 animation 分阶段控制 visibility 和 opacity，实现流畅又安全的显示隐藏。
以上就是css animation与visibility结合制作显示隐藏效果的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1045918.html
微信扫一扫 
支付宝扫一扫 
