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