求助：如何仅用CSS实现加载器动画的反向隐藏效果？

问题根源 #

你当前的动画在反向执行时，会在动画开始1%的节点就把z-index从15切换到-1，导致加载器瞬间跑到页面底层，视觉上看起来像是直接消失，完全看不到透明度变化的动画。

修复方案 #

核心思路是把z-index的调整和透明度动画解耦，确保隐藏动画执行期间，加载器始终保持顶层层级，动画结束后再把它放到底层。

修改后的完整代码如下：

HTML（无需改动）

<div id="loader">
    <h1>Testing Loader</h1>
</div>

CSS

#loader{
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-color: brown;
    /* 初始状态：顶层但透明 */
    z-index: 15;
    opacity: 0;
    /* 显示动画 */
    animation: fadeIn 1s forwards;
}

/* 隐藏动画类 */
#loader.hideMe{
    animation: fadeOut 1s forwards;
}

/* 显示动画：仅控制透明度 */
@keyframes fadeIn{
    to{
        opacity: 1;
    }
}

/* 隐藏动画：先执行透明度降低，最后再把z-index设为-1 */
@keyframes fadeOut{
    0%{
        opacity: 1;
        z-index: 15;
    }
    99%{
        opacity: 0;
        z-index: 15;
    }
    100%{
        opacity: 0;
        z-index: -1;
    }
}

JavaScript

document.addEventListener('click', ()=>{
    const loader = document.querySelector('#loader');
    // 避免重复触发动画
    if(!loader.classList.contains('hideMe')){
        loader.classList.add('hideMe');
    }
});

关键改动说明 #

1. 拆分显示和隐藏动画为两个独立的@keyframes，避免使用animation-direction: reverse带来的层级混乱
2. 隐藏动画中，直到最后一刻（100%节点）才把z-index改为-1，确保整个透明度动画过程中加载器都在顶层，能完整展示动画效果
3. 初始状态设置z-index:15，保证显示动画正常执行
4. JS中调整为只添加一次hideMe类，避免重复点击导致动画反复触发

内容的提问来源于stack exchange，提问作者Abdul Raheem Dumrai