纯CSS动画隐藏图片最轻量，需用animation-fill-mode: forwards保持结束状态，并在99%帧保留visibility: visible以确保交互过渡，100%设visibility: hidden彻底禁用交互。
用 CSS animation 控制图片显示时长
直接用 CSS 动画是最轻量、无 JS 依赖的方案。核心思路是：让图片初始可见，然后在指定时间后把 opacity 变为 0，并设 visibility: hidden 或 display: none 来真正移出布局流（仅靠 opacity: 0 不算“隐藏”，它仍占位且可交互）。
关键点在于动画结束后的状态保持——必须用 animation-fill-mode: forwards，否则动画一结束就回退到初始状态。
.fade-out-img {
animation: hideAfter 3s forwards;
}
@keyframes hideAfter {
0% { opacity: 1; visibility: visible; }
99% { opacity: 0; visibility: visible; }
100% { opacity: 0; visibility: hidden; }
}
-
99%帧保留visibility: visible，避免过早不可点击或影响过渡效果 - 不用
display: none在 keyframes 里——CSS 动画不支持display插值，会直接跳变 - 如果图片需响应点击，
visibility: hidden比opacity: 0更稳妥，因前者彻底禁用交互
用 setTimeout + classList 移除图片
需要精确控制时机、或后续还要重新显示图片时，JS 更灵活。不要直接操作 style.display，而是切换 CSS 类，便于复用和维护。
<img id="autoHideImg" src="logo.png" class="showing" alt="HTML怎么让图片在指定的时间内自动隐藏" >
const img = document.getElementById('autoHideImg');
setTimeout(() => {
img.classList.remove('showing');
img.classList.add('hidden');
}, 2500);
- CSS 中定义
.hidden { display: none; }或.hidden { visibility: hidden; opacity: 0; } - 避免用
img.style.display = 'none'—— 内联样式优先级高，后续用 class 控制显隐会失效 - 如果页面有多个图片要分别定时隐藏，给每个
img加data-hide-delay属性更通用
隐藏后还想恢复？别用 display: none 硬删
如果业务逻辑要求“隐藏后再点按钮显示回来”，display: none 会导致元素完全退出渲染树，offsetHeight 为 0，某些动画库或测量逻辑会出错。这时应优先用 visibility: hidden 配合 opacity。
立即学习“前端免费学习笔记（深入）”；
-
visibility: hidden保留盒模型尺寸和文档流位置，JS 仍能读取宽高、事件监听器也依然有效（只是不响应） - 若需彻底释放资源（比如大图），再配合
loading="lazy"或在隐藏后清空src（但注意：清空后再次赋值会触发新加载） - 用
getComputedStyle(img).visibility === 'hidden'检查状态比查offsetWidth更准确
移动端 Safari 的 animation 兼容性坑
iOS 15.4 之前，Safari 对 animation-fill-mode: forwards 在 visibility 属性上的支持不稳定——动画结束后可能卡在 visibility: visible。稳妥做法是补一层 JS 回调兜底：
img.addEventListener('animationend', () => {
if (getComputedStyle(img).visibility === 'visible') {
img.style.visibility = 'hidden';
}
});
- 只在 iOS UA 下加这个监听，避免其他浏览器冗余执行
- 不要依赖
transitionend——visibility不触发 transition 事件 - 如果项目已用 Modernizr 或检测了
CSS.supports('animation', 'name')，可进一步限制兜底逻辑生效范围
