Div mit Animation ausblenden

[LP-Tobi]

Guten Abend!
Ich möchte ein div mit einer css-animation ausblenden...
folgenden Code hab ich mir überlegt:

animation: intro 7s 1;
  transform-origin:center center;
  -webkit-animation: intro 7s  1;}

@keyframes intro {
    0% {opacity: 1;}
    80% {opacity: 1;}
  95% { opacity: 0; }
  100% { opacity: 0;}

Wie kann ich verhindern das nach der Animation der div wieder angezeigt wird?

Danke für eure Hilfe!

 

[Tronjer]

Hänge mal dem Element, auf dem die Animation liegt, eine zusätzliche CSS-Klasse mit opacity:0 an.

 

[LP-Tobi]

Habe ich vergessen zu schreiben.....
Das Element ist Fullscreen und soll komplett ausgeblendet werden, da man sonst die Seite nicht mehr bedienen kann ;-)
Also wäre es super, wenn ich nach der Animation ein display:none rein bekommen könnte

 

[Tronjer]

Das Animation-Attribut wurde quasi als Ersatz für Flash entwickelt. Für dein Vorhaben muss das Element, auf dem die Ani liegt, zusätzlich das Attribut besitzen, welches keyframes bei 100% besitzt. Ist etwas tricky.

Leichter wäre es mit jQuery $.animate() oder vielleicht auch CSS transition.

 

[LP-Tobi]

Hab dem Element jetzt einfach ein margin-top -100% geben
und dann die Keyframes so gemacht:

@keyframes intro {
    0% {opacity: 1; margin-top: 0px;}
    80% {opacity: 1;margin-top: 0px;}
  100% { opacity: 0; margin-top: -100%;}

Gibt gleichzeitig noch einen netten Slide Effekt :-)