Animation on load delay, without showing

Refresh

April 2019

Views

44 time

1

I want to fade in my logo at page load. But, I want it to delay. But when I add the delay property, it first shows, and after the delay period it starts the animation. I want the logo to show, after the delay. What am I doing wrong?

Here's the JSFiddle http://jsfiddle.net/c8hx9/

HTML

<div id="show">hello!</div>

CSS

#show {
position: absolute;
left: 50%;
margin-left: -200px;
top: 200px;
margin-bottom: 300px;
animation: fadein 2s;
-moz-animation: fadein 2s;
/* Firefox */
-webkit-animation: fadein 2s;
/* Safari and Chrome */
-o-animation: fadein 2s;
/* Opera */
animation-delay:1s;
-webkit-animation-delay:1s;
}
@keyframes fadein {
from {
    opacity:0;
}
to {
    opacity:1;
}
}
@-moz-keyframes fadein {
/* Firefox */
from {
    opacity:0;
}
to {
    opacity:1;
}
}
@-webkit-keyframes fadein {
/* Safari and Chrome */
from {
    opacity:0;
}
to {
    opacity:1;
}
}
@-o-keyframes fadein {
/* Opera */
from {
    opacity:0;
}
to {
    opacity: 1;
}
}

1 answers

1

Just add opacity on the first statement class:

#show {
  opacity:0;
}

And to keep the final of the animation use forwards.

animation-fill-mode: forwards;

Check this Demo http://jsfiddle.net/c8hx9/2/