淡入/缩放页面

Question

我使用以下动画淡化/缩放在页面上作为叠加层的div（参见overlay class）。

@keyframes fadeInScale {
    0%{
        opacity:0;
        transform: scale(0.5);
    }
    100%{
        opacity:1;
        transform: scale(1);
    }
}

@keyframes fadeOutScale {
    0%{
        opacity:1;
        transform: scale(1);
    }
    100%{
        opacity:0;
        transform: scale(0.5);
    }
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 500;
    width: 100%;
    height: 100%;
}

.fade-scale-in {
    display: block;
    animation: fadeInScale 0.3s 1 ease-out;
}

.fade-scale-out {
    display: block;
    animation: fadeOutScale 0.3s 1 ease-out;
}

我基本上将类fade-scale-in（当它显示时）和fade-scale-out（当它从页面中删除时）添加到具有类overlay的div。问题是fadeOutScale动画导致div消失到原始页面的顶部（它被覆盖）而不是用户当前在原始页面上的位置。只有当我向下滚动叠加div时才会发生这种情况。如何让fadeOutScale动画消除用户当前在页面上的div？