从黑色淡入 css

Question

我一直在使用关键帧和动画使我的部分淡入，但每当我使用不透明度时，它总是从白色淡入。我如何才能让我的屏幕以黑色开始，然后淡入到我的部分中的内容？

Answer 1

为您的元素创建一个黑色叠加层（使用具有 position: absolute; top: 0; bottom: 0; left: 0; right: 0; 的相同大小的元素，而原始元素是具有 position: relative 的叠加层的父元素或其公共父元素具有 position: relative) 并淡化/过渡反方向的不透明度值 - 从 1.0 到 0.

Answer 2

您可以使用 Johannes 指定的叠加层

.overlay-black{
    position: absolute;
    top: 0; left: 0;
    height: 100vh;
    width: 100vw;
    z-index:1;
    background-color:black;
    animation-name:fadeIn;
    animation-duration:0.5s;
    animation-timing-function: ease-in;
    animation-fill-mode: forwards;
}

@keyframes fadeIn {
    from{
        opacity: 1;
    }
    to{
        opacity: 0;
    }
}

从黑色淡入 css

Make fadeIn from black css

css

fade