CSS Effekt ohne hover starten möglich?
0 0 0 
molily
CSS Effekt ohne hover starten möglich?
Hi zusammen,
CSS3 macht ja tolle Menüs und andere Effekte ohne Javascript möglich. Gibt es eine Möglichkeit diese auch ohne :hover zu starten? Ich denke da an einen Ersatz für setTimeout() und möchte eine Element 5 Sekunden nach dem Laden der Seite verändern. Bisher mit Javascript kein Problem...in CSS jedoch noch eine Herausforderung ;)
Danke
-
Meine Herren,
CSS3 macht ja tolle Menüs und andere Effekte ohne Javascript möglich. Gibt es eine Möglichkeit diese auch ohne :hover zu starten? Ich denke da an einen Ersatz für setTimeout() und möchte eine Element 5 Sekunden nach dem Laden der Seite verändern. Bisher mit Javascript kein Problem...in CSS jedoch noch eine Herausforderung ;)
Es gibt zwei Konzepte für bewegte Bilder in CSS:
Animationen [mdn] und Transitionen.
Der wesentliche unterschied besteht im Auslösungs-mechanismus. Eine Animation startet für gewöhnlich automatisch, während eine Transition vom Benutzer ausgelöst werden muss.
Animationen sollten für deinen Anwendungsfall geeignet sein.
-
cool http://www.w3schools.com/css/css3_animations.asp
Wenn ich nun ein div als Animation von links nach rechts bewege, springt es leider am Ender der Animation wieder auf seinen ursprünglichen Platz zurück...wie kann man dass verhindern? Die Animation läuft ansonsten echt super :)
-
Wenn ich nun ein div als Animation von links nach rechts bewege, springt es leider am Ender der Animation wieder auf seinen ursprünglichen Platz zurück...wie kann man dass verhindern? Die Animation läuft ansonsten echt super :)
animation-fill-mode: forwards;
oder, falls zudem die Startwerte auch vor dem Start der Animation angewandt werden sollen:
animation-fill-mode: both;
Siehe:
https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-modeGrüße,
Mathias-
animation-fill-mode: forwards;
Daaaanke :)
-
-
-