CSS fade in delay then fade out

[roysters]

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!

 

[roysters]

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.