html - Animation delay on background image

Question

I have finally made my background image fade in when my webpage loads, and now I want the animation to be a little delayed so you are able to se the background color for a moment.

I have tried to use the "animation-delay: 2s;" thing in css, but when the page loads, the image is already shown and the animation just starts after 2 seconds. This means that the image is shown, then disappears and then do the animation. I then tried to set the image to "opacity: 0;", but then problem just turns around. So now the image isn't shown to begin with, then the animation tuns, but after that the image disappears again

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; }
}​

I need the image to be invisible until a number of seconds after the page loads until the animation begins, and then stay visible. I hobe you can help me :)

标签： htmlcss

Answer 1

您可以添加animation-fill-mode: both之前和之后的动画。

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