Frage von T1Mde, 40

HTML/CSS/JS - Animation für p-Element?

Hi, wie kann ich einen Text (p) so animieren, dass er beim Laden der Seite langsam erscheint, sprich die Transparenz immer weniger wird (inkl. Hintergrund)? Also so ein FadeIn-Effekt...

Antwort
von Kompaktdesign, 20

Ich würde es so versuchen (ungetestet):

p {opacity:0; animation:fade 30s;-moz-animation:fade 30s;-webkit-animation:fade 30s;-o-animation:fade 30s;}

@keyframes fade {0% {opacity:0;} 100% {opacity:1;}}
@-webkit-keyframes {0% {opacity:0;} 100% {opacity:1;}}
@-moz-keyframes fade {0% {opacity:0;} 100% {opacity:1;}}
@-o-keyframes fade {0% {opacity:0;} 100% {opacity:1;}}
Kommentar von T1Mde ,

Das 'opacity: 0' im p-Element muss weg, sonst verschwindet der Text nach der Animation. Aber sonst perfekt, Danke!

Kommentar von Kompaktdesign ,

Ja, logisch, danke für den Hinweis. 

Ich habe eben gesehen, dass ich hinter @-webkit-keyframes das "fade" vergessen habe. Das muss natürlich wie bei den übrigen keyframes-Anweisungen auch hin.

Kommentar von T1Mde ,

jop

Keine passende Antwort gefunden?

Fragen Sie die Community