Hover-Effekt mit transition
ButtonVeränderung in gleichä���iger Geschwindigkeit
ButtonErst langsam, dann schnell transition-timing-function: ease-in
ButtonErst schnell, dann langsam transition-timing-function: ease-out
ButtonAnimation mit Verzögerung starten durch transition-delay
ButtonKurzschreibweise von CSS3-transition
Effekt<!DOCTYPE html> <html lang="de"> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS3 transition Beispiele - kr@nner.net</title> <style> div{ padding:10px 5px; } .button{ background-color:black; color:white; padding:12px 9px; text-decoration:none; } .button:hover{ color:white; background-color:green; } .transition{ transition-property:background-color; transition-duration:2s; } .b_neu{ background-color:black; color:white; padding:12px 9px; text-decoration:none; } .b_neu:hover{ color:white; padding-right:120px; transition-property:padding; transition-duration:3s; } .in{ transition-timing-function: ease-in; } .out{ transition-timing-function: ease-out; } .del{ transition-delay: 2s; } .a_effekt{ background:green; color:white; padding:12px; } .a_effekt:hover{ background:red; color:white; } .a_effekt{ transition:background 4s ease-in 1s; } </style> </head> <body> <div> <h1>CSS3 Animationen: transition erklärt</h1> <h2>Hover-Effekt ohne transition</h2> <a class="button" href="#">Button</a> </div> <div> <h2>Hover-Effekt mit transition</h2> <a class="button transition" href="#">Button</a> </div> <div> <h2>Veränderung in gleichä���iger Geschwindigkeit</h2> <a class="b_neu" href="#">Button</a> </div> <div> <h2>Erst langsam, dann schnell transition-timing-function: ease-in</h2> <a class="b_neu in" href="#">Button</a> </div> <div> <h2>Erst schnell, dann langsam transition-timing-function: ease-out</h2> <a class="b_neu out" href="#">Button</a> </div> <div> <h2>Animation mit Verzögerung starten durch transition-delay</h2> <a class="b_neu del" href="#">Button</a> </div> <div> <h2>Kurzschreibweise von CSS3-transition</h2> <a class="a_effekt" href="#">Effekt</a> </div> </body> </html>
Hinterlasse jetzt einen Kommentar