PSD-Tutorials.de
Forum für Design, Fotografie & Bildbearbeitung
Tutkit
Agentur
Hilfe
Kontakt
Start
Forum
Aktuelles
Besonderer Inhalt
Foren durchsuchen
Tutorials
News
Anmelden
Kostenlos registrieren
Aktuelles
Suche
Suche
Nur Titel durchsuchen
Von:
Menü
Anmelden
Kostenlos registrieren
App installieren
Installieren
JavaScript ist deaktiviert. Für eine bessere Darstellung aktiviere bitte JavaScript in deinem Browser, bevor du fortfährst.
Du verwendest einen veralteten Browser. Es ist möglich, dass diese oder andere Websites nicht korrekt angezeigt werden.
Du solltest ein Upgrade durchführen oder einen
alternativen Browser
verwenden.
Antworten auf deine Fragen:
Neues Thema erstellen
Start
Forum
Sonstiges
Webdesign, Webentwicklung & Programmierung
Webdesign: HTML/CSS, Responsive Design, Sass...
Animation mit CSS3
Beitrag
<blockquote data-quote="Spatzihasi" data-source="post: 2469053" data-attributes="member: 376406"><p>Hi ihr Lieben</p><p></p><p>vielleicht könnt ihr mir helfen.</p><p>ich mach da jetzt seit 5 Stunden rum und ich weiss nicht mehr so richtig weiter.</p><p></p><p>Ich möchte für meine Webseite ein Intro machen welches kommt bevor die Hauptseite erscheint.</p><p>Das Ganze mit CSS 3</p><p></p><p>Ich möchte das wenn ich die Seite öffne Text eingeblendet wird ala "Herzlich Willkommen auf meiner Seite bla bla"....Und dann das Ganze ausblendet und an der Stelle zentriert mein Bild kommt.</p><p>Aber erst dann, wenn der Text wieder weg ist. Also so lange soll es unsichtbar sein.</p><p></p><p>So richtig krieg ich das nicht hin. Ich muss dazu sagen dass ich heute auch das erste Mal praktisch mit CSS3 arbeite.</p><p></p><p><strong>Es ist bei mir im Moment so:</strong></p><p>Logo erscheint sofort beim Laden der Seite... gleichzeitig fadet der Text ein.</p><p>Logo geht weg und fadet ein zur festgelegten Verzögerungszeit<span style="color: #000000"> und bleibt</span></p><p>Aber wie bekomme ich es hin dass es am Anfang erstmal weg bleibt bis der Text da ist<span style="color: #000000">,</span></p><p><span style="color: #000000">der Text dann geht und das Logo erscheint?</span></p><p>.</p><p>Eigentlich wollte ich auch dass der Text genauso an der Stelle erscheint wie das Logo im Moment ist,</p><p>aber das hab ich bisher von den Abständen noch nicht gemacht. Ich wollte erstmal dass die Animation</p><p>richtig funktioniert.</p><p></p><p>Hier mal der Code:</p><p></p><p>[php]</p><p><!DOCTYPE html></p><p><head></p><p><meta charset="utf-8"></p><p><!-- <meta http-equiv="refresh" content="5; URL=home.html">--></p><p><title>..........</title></p><p><style type="text/css"></p><p><!--</p><p>html, body {</p><p>Hier sind nur ein paar Zeilen für einen Hintergrund</p><p>andere Einstellungen.</p><p>}</p><p></p><p>......CSS..............</p><p></p><p>img {</p><p>margin-left:23%;</p><p>margin-top:3%;</p><p>-webkit-animation-name:imgblend;</p><p>-webkit-animation-duration:8s;</p><p>-webkit-animation-delay:5s;</p><p></p><p>-moz-animation-name:imgblend;</p><p>-moz-animation-duration:8s;</p><p>-moz-animation-delay:5s;</p><p></p><p>-o-animation-name:imgblend;</p><p>-o-animation-duration:8s;</p><p>-o-animation-delay:5s;</p><p></p><p>animation-name:imgblend;</p><p>animation-duration:8s;</p><p>animation-delay:5s;</p><p>}</p><p></p><p>@-webkit-keyframes imgblend {</p><p>from { opacity: 0; }</p><p>to { opacity: 1; }</p><p>}</p><p>@-moz-keyframes imgblend {</p><p>from { opacity: 0; }</p><p>to { opacity: 1; }</p><p>}</p><p>@-o-keyframes imgblend {</p><p>from { opacity: 0; }</p><p>to { opacity: 1; }</p><p>}</p><p>@-moz-keyframes imgblend {</p><p>from { opacity: 0; }</p><p>to { opacity: 1; }</p><p>}</p><p></p><p>@keyframes imgblend {</p><p>from { opacity: 0; }</p><p>to { opacity: 1; }</p><p>}</p><p></p><p>p {</p><p>margin-left:35%;</p><p>padding:2%;</p><p>font-size:1em;</p><p>-webkit-animation-name:fadeIn;</p><p>-webkit-animation-duration:8s;</p><p></p><p>-moz-animation-name:fadeIn;</p><p>-moz-animation-duration:8s;</p><p></p><p>-o-animation-name:fadeIn;</p><p>-o-animation-duration:8s;</p><p></p><p>animation-name:fadeIn;</p><p>animation-duration:8s;</p><p>}</p><p></p><p>@-webkit-keyframes fadeIn {</p><p>from { opacity: 0; }</p><p>to { opacity: 1; }</p><p>}</p><p>@-moz-keyframes fadeIn {</p><p>from { opacity: 0; }</p><p>to{ opacity: 1; }</p><p>}</p><p>@-o-keyframes fadeIn {</p><p>from { opacity: 0; }</p><p>to { opacity: 1; }</p><p>}</p><p>@-moz-keyframes fadeIn {</p><p>from { opacity: 0;}</p><p>to { opacity: 1; }</p><p>}</p><p></p><p>@keyframes fadeIn {</p><p>from { opacity: 0; }</p><p>to { opacity: 1; }</p><p>}</p><p></p><p>--></p><p></style></p><p></head></p><p><body></p><p></p><p>.....bisschen HTML..............</p><p><div></p><p><img src="bilder/logo.png" width="50%" alt="hier steht auch text"></p><p><p> Herzlich Willkommen auf meiner Seite</p></p><p></div></p><p></body></p><p></html></p><p>[/php]</p><p></p><p>Was mir auch noch komisch vor kommt... :</p><p>Bei den [USER=369841]@Keyframe[/USER] Schnipseln die letzte geschlossene</p><p>geschweifte Klammer ist dunk<span style="color: #000000">el</span>rot, die anderen sind in Dreamweaver rosa.</p><p>Das heisst ja eigentlich dass sie nicht richtig sitzt oder zu viel ist aber es funktioniert und wurde mir auch so angegeben dass ich sie so setzen muss.</p><p><span style="color: #000000"></span></p><p><span style="color: #000000"><strong>Hier mal als Beispiel:: </strong></span></p><p><span style="color: #000000"></span></p><p><span style="color: #ff0000"><span style="color: #000000">@keyframes fadeIn {</span></span></p><p><span style="color: #ff0000"><span style="color: #000000">from { opacity: 0; }</span></span></p><p><span style="color: #ff0000"><span style="color: #000000">to { opacity: 1; }</span></span></p><p><span style="color: #ff0000"><strong><span style="color: #ff0000">}</span></strong></span></p><p></p><p></p><p>Ich weiss das man die ganzen Animationseigenschaften auch zusammen fassen kann aber bis ich mir merken kann was was ist schreibe ich es ausführlicher.</p><p></p><p>ich hoffe mir kann jemand helfen und sag schon mal lieb danke</p><p></p><p>LG Christin</p></blockquote><p></p>
[QUOTE="Spatzihasi, post: 2469053, member: 376406"] Hi ihr Lieben vielleicht könnt ihr mir helfen. ich mach da jetzt seit 5 Stunden rum und ich weiss nicht mehr so richtig weiter. Ich möchte für meine Webseite ein Intro machen welches kommt bevor die Hauptseite erscheint. Das Ganze mit CSS 3 Ich möchte das wenn ich die Seite öffne Text eingeblendet wird ala "Herzlich Willkommen auf meiner Seite bla bla"....Und dann das Ganze ausblendet und an der Stelle zentriert mein Bild kommt. Aber erst dann, wenn der Text wieder weg ist. Also so lange soll es unsichtbar sein. So richtig krieg ich das nicht hin. Ich muss dazu sagen dass ich heute auch das erste Mal praktisch mit CSS3 arbeite. [B]Es ist bei mir im Moment so:[/B] Logo erscheint sofort beim Laden der Seite... gleichzeitig fadet der Text ein. Logo geht weg und fadet ein zur festgelegten Verzögerungszeit[COLOR=#000000] und bleibt[/COLOR] Aber wie bekomme ich es hin dass es am Anfang erstmal weg bleibt bis der Text da ist[COLOR=#000000], der Text dann geht und das Logo erscheint?[/COLOR] . Eigentlich wollte ich auch dass der Text genauso an der Stelle erscheint wie das Logo im Moment ist, aber das hab ich bisher von den Abständen noch nicht gemacht. Ich wollte erstmal dass die Animation richtig funktioniert. Hier mal der Code: [php] <!DOCTYPE html> <head> <meta charset="utf-8"> <!-- <meta http-equiv="refresh" content="5; URL=home.html">--> <title>..........</title> <style type="text/css"> <!-- html, body { Hier sind nur ein paar Zeilen für einen Hintergrund andere Einstellungen. } ......CSS.............. img { margin-left:23%; margin-top:3%; -webkit-animation-name:imgblend; -webkit-animation-duration:8s; -webkit-animation-delay:5s; -moz-animation-name:imgblend; -moz-animation-duration:8s; -moz-animation-delay:5s; -o-animation-name:imgblend; -o-animation-duration:8s; -o-animation-delay:5s; animation-name:imgblend; animation-duration:8s; animation-delay:5s; } @-webkit-keyframes imgblend { from { opacity: 0; } to { opacity: 1; } } @-moz-keyframes imgblend { from { opacity: 0; } to { opacity: 1; } } @-o-keyframes imgblend { from { opacity: 0; } to { opacity: 1; } } @-moz-keyframes imgblend { from { opacity: 0; } to { opacity: 1; } } @keyframes imgblend { from { opacity: 0; } to { opacity: 1; } } p { margin-left:35%; padding:2%; font-size:1em; -webkit-animation-name:fadeIn; -webkit-animation-duration:8s; -moz-animation-name:fadeIn; -moz-animation-duration:8s; -o-animation-name:fadeIn; -o-animation-duration:8s; animation-name:fadeIn; animation-duration:8s; } @-webkit-keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @-moz-keyframes fadeIn { from { opacity: 0; } to{ opacity: 1; } } @-o-keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @-moz-keyframes fadeIn { from { opacity: 0;} to { opacity: 1; } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } --> </style> </head> <body> .....bisschen HTML.............. <div> <img src="bilder/logo.png" width="50%" alt="hier steht auch text"> <p> Herzlich Willkommen auf meiner Seite</p> </div> </body> </html> [/php] Was mir auch noch komisch vor kommt... : Bei den [USER=369841]@Keyframe[/USER] Schnipseln die letzte geschlossene geschweifte Klammer ist dunk[COLOR=#000000]el[/COLOR]rot, die anderen sind in Dreamweaver rosa. Das heisst ja eigentlich dass sie nicht richtig sitzt oder zu viel ist aber es funktioniert und wurde mir auch so angegeben dass ich sie so setzen muss. [COLOR=#000000] [B]Hier mal als Beispiel:: [/B] [/COLOR] [COLOR=#ff0000][COLOR=#000000]@keyframes fadeIn {[/COLOR][/COLOR] [COLOR=#ff0000][COLOR=#000000]from { opacity: 0; }[/COLOR][/COLOR] [COLOR=#ff0000][COLOR=#000000]to { opacity: 1; }[/COLOR][/COLOR] [COLOR=#ff0000][B][COLOR=#ff0000]}[/COLOR][/B][/COLOR] Ich weiss das man die ganzen Animationseigenschaften auch zusammen fassen kann aber bis ich mir merken kann was was ist schreibe ich es ausführlicher. ich hoffe mir kann jemand helfen und sag schon mal lieb danke LG Christin [/QUOTE]
Bilder bitte
hier hochladen
und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Zitate einfügen…
Authentifizierung
Wenn ▲ = 5, ▼ = 2 und ■ = 7, was ist ▲ × ▼ + ■?
Antworten
Start
Forum
Sonstiges
Webdesign, Webentwicklung & Programmierung
Webdesign: HTML/CSS, Responsive Design, Sass...
Animation mit CSS3
Oben