CSS fade in delay then fade out

roysters · 29 Jul 2015 at 19:53

Hey guys,

Maybe im totally stupid but this doesn't seem as easy as it sounds... All I want to do is fade in a logo and 30 sec later fade out.

I have a logo as a div. <div=class "logo"></div>. Etc

Then the animation properties. Everything fades in fine.

#logo {

Animation name: fadeout 1s {
Etc

}

Then the

Keyframes fadeout{

0% {
Opacity 1;
}

100% {
Opacity 0;

}

But! It wont. I'm trying to ad another delay but it doesn't work.

I'll paste the proper code when I get home. I tried using jquery but apparently this clashes with CSS animations?

Cheers!

AHarvey · 29 Jul 2015 at 21:26

I've no idea on the fading, but wouldn't the code be:

<div class="logo">

</div>

and in CSS aren't classes put down as:

.logo

with #logo being for an ID?

My html/css is all over the place, really trying to get a kick *** foundation set up in it and I am using Bootstrap too at the moment.

EDIT: Is this of any help? http://stackoverflow.com/questions/23985018/simple-css-animation-loop-fading-in-out-loading-text

roysters · 29 Jul 2015 at 22:15

Not quite. That loops indefinitely. I need the logo to come on screen, then hold for x amount of seconds, then fade out. Just how you might see on a TV ad.

ikillbears · 29 Jul 2015 at 23:37

haven't fully read it but there are websites where you can put what you want for your settings and it will throw you out the css

dacads · 29 Jul 2015 at 23:43

animation-name: fadein 2s 30s, fadeout 2s

Don't forget to make the keyframes for fadein.

And yeah it should be .logo as it's a class, # is for IDs.