Question

我终于使我的网页加载时背景图像淡出了，现在我希望动画稍有延迟，以便您可以暂时保留背景颜色。

我尝试使用“动画延迟：2s；” css中的内容，但是当页面加载时，图像已经显示，并且动画仅在2秒后开始。这意味着先显示图像，然后消失，然后再进行动画处理。然后，我尝试将图像设置为“ opacity：0;”，但是问题就解决了。因此，现在没有显示图像的开始，而是动画进行了调整，但是之后图像又消失了

html：

<div class="imageThing">
</div>

css：

/* attempt 1 */
.imageThing {
    background: #fff url('image') 0px 0px no-repeat ;
    background-size: 100vw 30.15vw;
    -webkit-animation: fadein 3s; /* Safari and Chrome */
    -moz-animation: fadein 3s; /* Firefox */
    -ms-animation: fadein 3s; /* Internet Explorer */
    -o-animation: fadein 3s; /* Opera */
    animation: fadein 3s;
    animation-delay: 2s;
    height: 30.15vw;
    width: 100vw;
    position: absolute;  top: 0px; left: 0px;
}


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

/* Firefox */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari and Chrome */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}


/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* attempt 2 */
   .imageThing {
   background: #fff url('image') 0px 0px no-repeat ;
   opacity: 0;
   background-size: 100vw 30.15vw;
   -webkit-animation: fadein 3s; /* Safari and Chrome */
   -moz-animation: fadein 3s; /* Firefox */
   -ms-animation: fadein 3s; /* Internet Explorer */
   -o-animation: fadein 3s; /* Opera */ 
   animation: fadein 3s;
   animation-delay: 2s; 
   height: 30.15vw;
   width: 100vw;
   position: absolute;  top: 0px; left: 0px;
}


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


/* Firefox */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}


/* Safari and Chrome */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

我需要图像是不可见的，直到页面加载后几秒钟直到动画开始为止，然后保持可见。我希望您可以帮助我:)

Answer 1

您可以添加animation-fill-mode: both来保留动画的前后。

.imageThing {
  animation-fill-mode: both;
}

背景图片的动画延迟

1 个答案: