Div mit Animation ausblenden

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

[CODE]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;}[/CODE]

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

Danke für eure Hilfe!

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

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

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.

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 :slight_smile: