CSS3 Übergangseffekte, Transformationen und Animationen
In diesem Beitrag geht es vorrangig um CSS3 Effekte. Vorgestellt werden diverse CSS3 Übergänge, Transformationen und Animationen, welche mittels Mouseover bei Bedarf hervorgerufen werden. Neben den zahlreichen visuellen Beispielen finden Sie auch gleich den dazugehörigen Quellcode. Diesen können Sie frei verwenden und natürlich auch modifizieren für was auch immer Sie wollen.
CSS3 ist eine wahre Bereicherung. Es erleichtert das Designen von modernen Webseiten, geht schnell, ist effizient und es lässt nicht selten das Besucherherz ein wenig höher schlagen. Mit CSS3 kann man einige nette Effekte ins Leben rufen, wofür man früher zumeist auf Javascript oder Flash zurückgreifen musste.
Ein Wort zu Anbieter-Präfixen (vendor prefixes)
Bevor wir durchstarten, möchte ich Ihnen eine Übersicht zu den Präfixen verschiedener Anbieter [-webkit-|-moz-|-o-|-ms-] geben, die Sie auf dieser Seite finden. Der Grund dafür ist, dass Sie nicht alle Präfixe überall einfügen müssen. Zum Beispiel kommt Firefox seit dem Release im Oktober 2012 ohne das Präfix -moz- bei Transformationen aus. Wollen Sie diese jedoch unbedingt im IE9 verfügbar machen, so müssen Sie -ms- zusätzlich berücksichtigen. Ich nutze hier nur Präfixe, die im Hinblick auf Gegenwart und Zukunft Sinn machen. Doch falls Sie Rückwärtskompatibilität gewährleisten möchten, werfen Sie einen Blick in folgende Tabelle und fügen Sie die Werte entsprechend in Ihren Code ein.
Typ Berücksichtigen Rückwärtskompatibilität Für Version Erschienen transform (2d) -webkit- -moz-
-o-
-ms-FF <= 15
Opera <= 12
IE 910/2012
10/2012
03/2011transform (3d) -webkit- -moz- FF <= 15 10/2012 transition -webkit-
(für Android/Blackberry)-moz-
-o-FF <= 15
Opera <= 1210/2012
10/2012animation -webkit- -moz- FF <= 15 10/2012 backface-visibility -webkit- -moz- FF <= 15 10/2012 @keyframes -webkit- -o- Opera <= 12 10/2012 box-shadow - -webkit-
(Für zahlreiche Browser)Verschiedene Verschiedene
Wie Sie unschwer erkennen können, besteht kein Grund mehr dazu, alle möglichen Präfixe anzubieten. Diese Zeiten sind glücklicherweise vorbei. Vor allem, wenn man bedenkt, dass die meisten modernen Browser sich automatisch (oder zumindest halbautomatisch) auf die neueste Version aktualisieren. Allgemein gesprochen reicht es für so ziemlich alles vollkommen aus, -webkit- zusammen mit der präfixlosen Version anzubieten. Da das nun geklärt ist, machen wir uns gleich ans Werk. Tauchen wir gemeinsam ein in die Welt von CSS3!
01: Bildgröße
.bild:hover {-webkit-transform:scale(1.2); transform:scale(1.2);} .bild {-webkit-transition: all 0.7s ease; transition: all 0.7s ease;}
02: Einzoomen
.container:hover .bild {-webkit-transform:scale(1.3); transform:scale(1.3);} .container {overflow:hidden;} .bild {-webkit-transition: all 0.7s ease; transition: all 0.7s ease;}
03: Auszoomen
.container:hover .bild {-webkit-transform:scale(1); transform:scale(1);} .container {overflow:hidden;} .bild {-webkit-transform:scale(1.3); transform:scale(1.3); -webkit-transition: all 0.7s ease; transition: all 0.7s ease;}
04: Ränder und Schatteneffekte
.bild:hover {border-radius:50%; box-shadow: 0 10px 6px -6px grey;} .bild {-webkit-transition: all 0.7s ease; transition: all 0.7s ease;}
05: Randverzerrung
.bild:hover {border-top-left-radius: 120px; border-bottom-right-radius: 120px;} .bild {border-top-left-radius: 15px; border-top-right-radius: 120px; border-bottom-left-radius: 120px; border-bottom-right-radius: 15px; -webkit-transition: all 0.7s ease; transition: all 0.7s ease;}
06: Randverzerrung II
.bild:hover {border-top-left-radius: 30px 120px; border-bottom-right-radius: 30px 120px;} .bild {border-top-left-radius: 15px; border-top-right-radius: 120px 30px; border-bottom-left-radius: 120px 30px; border-bottom-right-radius: 15px; -webkit-transition: all 0.7s ease; transition: all 0.7s ease;}
07: Leuchtende Ränder
.bild:hover {-webkit-box-shadow: 0px 0px 15px 10px rgba(255, 255, 255, .75); box-shadow: 0px 0px 15px 10px rgba(255, 255, 255, .75);} .bild {-webkit-box-shadow: 0px 0px 15px 5px rgba(0, 185, 233, .75); box-shadow: 0px 0px 15px 5px rgba(0, 185, 233, .75); -webkit-transition: all 0.7s ease; transition: all 0.7s ease;}
08: Rotation (2D)
.bild:hover {-webkit-transform: rotate(45deg); transform: rotate(45deg);} .bild {-webkit-transition: all 0.7s ease; transition: all 0.7s ease;}
09: Schrägen
.bild:hover {-webkit-transform: skew(0deg,20deg); transform: skew(0deg,20deg);} .bild {-webkit-transition: all 0.7s ease; transition: all 0.7s ease;}
10: Verschiebung und Deckkraft
.bild:hover {-webkit-transform: translate(20px,-50px); transform: translate(20px,-50px); opacity: 0.4;} .bild {opacity: 1; -webkit-transition: all 0.7s ease; transition: all 0.7s ease;}
11: Umdrehen (Flip)
.container:hover .bild{-webkit-transform: rotateY(180deg); -webkit-transform-style: preserve-3d; transform: rotateY(180deg); transform-style: preserve-3d;} .container .bild, .container:hover .bild {-webkit-transition: all 0.7s ease; transition: all 0.7s ease;}/* Anmerkung: Natürlich könnten Sie auch hier die Bildklasse direkt mit "bild:hover" ansteuern. Den Elterncontainer dafür zu nutzen, ist bei 3D Effekten jedoch hier die geeignetere Wahl, da dies browserunabhängig zu einer besseren Animation führt. Stellen Sie jedoch Sicher, dass die Größe des Containers mit der des Bildes übereinstimmt. */
12: Vertikale Kartendrehung
James Star
CSS
.kartendiv {width:200px; height:150px; position:relative; -webkit-transform-style: preserve-3d; -webkit-transform-origin: 100% 75px; -webkit-transition: all 0.7s ease; transform-style: preserve-3d; transform-origin: 100% 75px; transition: all 0.7s ease;} .container:hover .kartendiv {-webkit-transform: rotateX(-180deg); transform: rotateX(-180deg);} .oberseite, .unterseite {width:200px; height:150px; position:absolute; left:0; -webkit-backface-visibility:hidden; backface-visibility:hidden;} .unterseite {padding-top:50px; -webkit-transform: rotateX(180deg); transform: rotateX(180deg);}HTML
<div class="container"><div class="kartendiv"></div><img class="oberseite" src="img" alt="img"> <p class="unterseite">Text</p></div>/* Anmerkung: IE 11 unterstützt noch nicht "transform-style: preserve-3d;". Demnach sehen IE-Nutzer nur eine vertikale Bildkippung, sofern man nicht javascript/jQuery unter die Arme greift. Das mag sich in Zukunft durchaus ändern. */
13: Umformung
.bild:hover {-webkit-box-shadow: 0px 0px 15px 15px #fff; box-shadow: 0px 0px 15px 15px #fff; border-radius:50%; opacity: 0.6; -webkit-transform: rotate(720deg); transform: rotate(720deg);} .bild {opacity: 1; -webkit-transition: all 0.7s ease; transition: all 0.7s ease;}
14: 3D Text
James Star
.text:hover {text-shadow: 0 1px 0 #666, tx0 2px 0 #555, 1px 3px 0 #444, 2px 4px 0 #333, 3px 5px 0 #222, 4px 6px 1px #111, 0 0 5px rgba(0,0,0,.6), 0 1px 3px rgba(0,0,0,.5), 1px 3px 5px rgba(0,0,0,.4), 3px 5px 10px rgba(0,0,0,.3), 5px 10px 10px rgba(0,0,0,.2), 10px 20px 20px rgba(0,0,0,.1);} .text {-webkit-transition: all 0.7s ease; transition: all 0.7s ease;}
15: Verwischen
James Star
.text:hover {color: rgba(0,0,0,0); text-shadow: 0 0 20px #FBFE8B;} .text {color: #FBFE8B; -webkit-transition: all 0.7s ease; transition: all 0.7s ease;}/* Anmerkung: Sofern Sie den Effekt aktiv auf Ihrer Liveseite einsetzen wollen, bedenken Sie bitte, dass der Text für IE Nutzer nicht verwischt, sondern verschwindet. Als Behelf könnte man beispielsweise Folgendes tun:Anmerkung II: Für diesen Effekt gibt es auch einen Blur-Filter. Allerdings ist obige Methode derzeit (Stand: Dezember 2013) noch die bessere Wahl. Das mag sich in Zukunft ändern. */
- Ein verschwommenes Rückfallbild.
- Den Filter "filter: progid:DXImageTransform.Microsoft.Blur(pixelradius=5);" für alte IE Versionen nutzen (funktioniert jedoch nicht mehr ab IE10 aufwärts. Deshalb rate ich davon ab).
- Machen Sie sich mit der Funktionsweise von SVG (Scalable Vector Graphics) Filtereffekten vertraut.
16: Leuchtender Text
James Star
.text:hover {text-shadow: 0px 0 15px #fff;} .text {-webkit-transition: all 0.7s ease; transition: all 0.7s ease;}
17: Bild mit Textüberlagerung – Verblasseneffekt
CSS
.container {position:relative;} .textbox:hover {opacity:1;} .text {padding-top: 50px;} .textbox {width:200px; height:150px; position:absolute; top:0; left:0; opacity:0; border-radius:5px; background-color: rgba(0,0,0,0.75); -webkit-box-shadow: 0px 0px 15px 2px rgba(255,255,255,.75); box-shadow: 0px 0px 15px 2px rgba(255,255,255,.75); -webkit-transition: all 0.7s ease; transition: all 0.7s ease;}HTML
<div class="container"><img src="" alt=""> <div class="textbox"></div><p class="text">TEXT</p></div>
18: Bild mit Textüberlagerung – Zoomeffekt
CSS
.container {position:relative;} .container .textbox {width:200px; height:150px; position:absolute; top:0; left:0; -webkit-transform: scale(0); transform: scale(0); border-radius:5px; background-color: rgba(0,0,0,0.75); -webkit-box-shadow: 0px 0px 15px 2px rgba(255,255,255,.75); box-shadow: 0px 0px 15px 2px rgba(255,255,255,.75);} .container:hover .textbox {-webkit-transform: scale(1); transform: scale(1);} .text {padding-top: 50px;} .textbox {-webkit-transition: all 0.7s ease; transition: all 0.7s ease;}HTML
<div class="container"><img src="" alt=""> <div class="textbox"></div><p class="text">TEXT</p></div>
19: Bild mit Textüberlagerung – Schiebeeffekt
CSS
.container {position:relative; overflow:hidden;} .container .textbox {width:200px; height:150px; position:absolute; top:0; left:0; margin-top:-160px; transform: scale(0); border-radius:5px; background-color: rgba(0,0,0,0.75); -webkit-box-shadow: inset 0px 0px 5px 2px rgba(255,255,255,.75); box-shadow: inset 0px 0px 5px 2px rgba(255,255,255,.75);} .container:hover .textbox {margin-top:0;} .text {padding-top: 50px;} .textbox {-webkit-transition: all 0.7s ease; transition: all 0.7s ease;}HTML
<div class="container"><img src="" alt=""> <div class="textbox"></div><p class="text">TEXT</p></div>
20: Bild-Text-Verschiebung
CSS
.container {position:relative; overflow:hidden; width:200px; height:150px;} .container .textbox {position:absolute; top:0; left:0; width:200px; height:150px; margin-left:-210px;} .container:hover .textbox {margin-left:0;} .container img {margin-left:0;} .container:hover img {margin-left:210px;} .text {padding-top: 50px;} .container img, .textbox {-webkit-transition: all 0.7s ease; transition: all 0.7s ease;}HTML
<div class="container"><img src="" alt=""> <div class="textbox"></div><p class="text">TEXT</p></div>
Ein Wort zum Thema Easing
Vielleicht haben Sie in den obigen Quellcodes bemerkt, dass die bisherigen Beispiele alle die gleiche CSS3 Wegberechnungsfunktion ease mit einer Übergangszeit von 0,7 Sekunden verwenden. Es ging dabei darum, den eigentlichen Effekt zu betonen und diesen nicht durch ständige Abänderung der dahinterstehenden Funktion abzuschwächen. Sie können jedoch nicht nur die Übergangszeit individuell anpassen, sondern auch die Art, wie der Übergang im Webbrowser dargestellt wird. Hier sind einige Ihrer Möglichkeiten zusammen mit einer Beschreibung, wie diese sich unterscheiden:
ease: Die Animation gewinnt schnell an fahrt, wird gegen Ende jedoch recht langsam.ease-in-out: Die Animation startet und endet langsam.ease-in: Die Animation startet sehr langsam, beschleunigt dann aber bis zum Schluss.ease-out: Die Animation startet mit voller Geschwindigkeit, wird dann jedoch immer langsamer.linear: Die Geschwindigkeit der Animation ist konstant.
Wollen Sie lieber wissen, wie das alles aussieht? Kein Problem:
Hover hier
ease
ease-in-out
ease-in
ease-out
linear
custom
Wahrscheinlich ist das alles, was Sie jemals benötigen werden. Falls Sie jedoch perfektionistisch veranlagt sind, ein echter Crack oder einfach nur einen Zeitablauf haargenau an etwas Bestimmtes anpassen möchten, dann können Sie auch einen eigenen Animationsverlauf mit cubic-bezier() erstellen. Ersetzen Sie dafür einfach das Wort ease in den obigen Beispielen mit etwas Ähnlichem wie cubic-bezier(1,-0.75,0.5,1.2). Die ersten und letzten zwei Werte sind nichts anderes als zwei Kontrollpunkte auf dem Funktionsgraph, die repräsentiert werden als (x1,y1,x2,y2). Die Funktion wird immer bei den Koordinaten (0,0) starten und bei (1,1) enden. Aber mit diesen zwei Kontrollpunkten können Sie den Weg beeinflussen, wie jene vom Ausgangspunkt zum Endpunkt gelangt. Spielen Sie ein wenig mit den Werten, bis Sie zufrieden sind. Beispielsweise hat cubic-bezier(0.42,0,1,1) denselben Effekt wie ease-in, während cubic-bezier(0,0,0.58,1) ease-out entspricht.
Um die Unterschiede visuell zu veranschaulichen, schauen wir uns das Beispiel 11: Umformung mit cubic-bezier(1,-0.75,0.5,1.2) im direkten Vergleich zu ease an.
11: Umformung: | 11: Umformung: |
| |
21: Übergang zwischen zwei Bildern
CSS
.container {position:relative; width:200px; height:150px;} .container img {position:absolute; top:0; left:0; -webkit-transition: opacity 1.1s ease; transition: opacity 1.1s ease;} .container:hover .bild1 {opacity:0;}HTML
<div class="container"><img class="bild2" src="bild2" alt=""> <img class="bild1" src="bild1" alt=""></div>
22: Einfacher CSS3 Bildslider (ohne Javascript)
CSS
.container {position:relative; width:200px; height:150px;} .container img {position:absolute; top:0; left:0;} .container:hover img {-webkit-animation-name: slider; -webkit-animation-timing-function: ease; -webkit-animation-duration: 10s; -webkit-animation-iteration-count: infinite; animation-name: slider; animation-timing-function: ease; animation-duration: 10s; animation-iteration-count: infinite;} @-webkit-keyframes slider {0% {opacity:1;} 20% {opacity:0;} 80% {opacity:0;} 100% {opacity:1;}} @keyframes slider {0% {opacity:1;} 20% {opacity:0;} 80% {opacity:0;} 100% {opacity:1;}} .container img:nth-child(1) {animation-delay: 8s;} .container img:nth-child(2) {animation-delay: 6s;} .container img:nth-child(3) {animation-delay: 4s;} .container img:nth-child(4) {animation-delay: 2s;} .container img:nth-child(5) {animation-delay: 0s;}HTML
<div class="container"><img src="bild5" alt="bild5"> <img src="bild4" alt="bild4"> <img src="bild3" alt="bild3"> <img src="bild2" alt="bild2"> <img src="bild1" alt="bild1"></div>
23: Fortgeschrittener CSS3 Bildslider (ohne Javascript)
Hover hier
CSS
.container {position:relative; width:200px; height:150px;} .container img {position:absolute; top:0; left:0; opacity:0;} .container:hover img {-webkit-animation-name: slider; -webkit-animation-timing-function: ease; -webkit-animation-duration: 10s; -webkit-animation-iteration-count: infinite; animation-name: slider; animation-timing-function: ease; animation-duration: 10s; animation-iteration-count: infinite;} @-webkit-keyframes slider {0% {opacity:0;-webkit-transform: rotate(0) scale(0.5) skew(30deg,20deg);} 20% {opacity:1;-webkit-transform: rotate(0) scale(1) skew(0deg,0deg);} 30% {opacity:0;-webkit-transform: rotate(-360deg) scale(0) skew(0deg,0deg);} 100% {opacity:0;-webkit-transform: rotate(0) scale(0.5) skew(30deg,20deg);}} @keyframes slider {0% {opacity:0;transform: rotate(0) scale(0.5) skew(30deg,20deg);} 20% {opacity:1;transform: rotate(0) scale(1) skew(0deg,0deg);} 30% {opacity:0;transform: rotate(-360deg) scale(0) skew(0deg,0deg);} 100% {opacity:0;transform: rotate(0) scale(0.5) skew(30deg,20deg);}} .container img:nth-of-type(1) {animation-delay: 8s;} .container img:nth-of-type(2) {animation-delay: 6s;} .container img:nth-of-type(3) {animation-delay: 4s;} .container img:nth-of-type(4) {animation-delay: 2s;} .container img:nth-of-type(5) {animation-delay: 0s;} .container .hovertext {position: absolute; top:60px; left:30px; font-size:1.5em; color: rgba(255,255,255,1); -webkit-transition: all 0.7s ease; transition: all 0.7s ease;} .container:hover .hovertext {top:20px; color: rgba(255,255,255,0); -webkit-transition: all 0.7s ease; transition: all 0.7s ease;}HTML
<div class="container"><img src="bild5" alt="bild5"> <img src="bild4" alt="bild4"> <img src="bild3" alt="bild3"> <img src="bild2" alt="bild2"> <img src="bild1" alt="bild1"> <p class="hovertext">Hover hier</p></div>
24: Bebeneffekt
@-webkit-keyframes beben {0% { -webkit-transform: rotate(0deg) translate(2px, 1px); } 10% { -webkit-transform: rotate(2deg) translate(1px, 2px); } 20% { -webkit-transform: rotate(-2deg) translate(3px, 0px) ; } 30% { -webkit-transform: rotate(0deg) translate(0px, -2px); } 40% { -webkit-transform: rotate(-2deg) translate(-1px, 1px); } 50% { -webkit-transform: rotate(2deg) translate(1px, -2px); } 60% { -webkit-transform: rotate(0deg) translate(3px, -1px); } 70% { -webkit-transform: rotate(2deg) translate(-2px, -1px); } 80% { -webkit-transform: rotate(-2deg) translate(1px, 1px); } 90% { -webkit-transform: rotate(0deg) translate(-2px, -2px); } 100% { -webkit-transform: rotate(2deg) translate(-1px, 2px); }} @keyframes beben {0% { transform: rotate(0deg) translate(2px, 1px); } 10% { transform: rotate(2deg) translate(1px, 2px); } 20% { transform: rotate(-2deg) translate(3px, 0px) ; } 30% { transform: rotate(0deg) translate(0px, -2px); } 40% { transform: rotate(-2deg) translate(-1px, 1px); } 50% { transform: rotate(2deg) translate(1px, -2px); } 60% { transform: rotate(0deg) translate(3px, -1px); } 70% { transform: rotate(2deg) translate(-2px, -1px); } 80% { transform: rotate(-2deg) translate(1px, 1px); } 90% { transform: rotate(0deg) translate(-2px, -2px); } 100% { transform: rotate(2deg) translate(-1px, 2px); }} .beben img:hover {-webkit-animation-name: beben; -webkit-animation-duration: 1s; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: infinite; animation-name: beben; animation-duration: 1s; animation-timing-function: linear; animation-iteration-count: infinite;}
25: Wechselnde Farben
Hover hier
@-webkit-keyframes farbig {0% {box-shadow: 0px 0px 15px #FFFFFF; background-color: #000000;} 10% {box-shadow: 0px 0px 15px #2F4F4F; background-color: #0000FF;} 20% {box-shadow: 0px 0px 15px #800080; background-color: #FF00FF;} 30% {box-shadow: 0px 0px 15px #FF0000; background-color: #008080;} 40% {box-shadow: 0px 0px 15px #FFFF00; background-color: #00FF00;} 50% {box-shadow: 0px 0px 15px #000000; background-color: #FFFFFF;} 60% {box-shadow: 0px 0px 15px #0000FF; background-color: #FFFF00;} 70% {box-shadow: 0px 0px 15px #FF00FF; background-color: #FF0000;} 80% {box-shadow: 0px 0px 15px #008080; background-color: #800080;} 90% {box-shadow: 0px 0px 15px #00FF00; background-color: #2F4F4F;} 100% {box-shadow: 0px 0px 15px #FFFFFF; background-color: #000000;}} @keyframes farbig {0% {box-shadow: 0px 0px 15px #FFFFFF; background-color: #000000;} 10% {box-shadow: 0px 0px 15px #2F4F4F; background-color: #0000FF;} 20% {box-shadow: 0px 0px 15px #800080; background-color: #FF00FF;} 30% {box-shadow: 0px 0px 15px #FF0000; background-color: #008080;} 40% {box-shadow: 0px 0px 15px #FFFF00; background-color: #00FF00;} 50% {box-shadow: 0px 0px 15px #000000; background-color: #FFFFFF;} 60% {box-shadow: 0px 0px 15px #0000FF; background-color: #FFFF00;} 70% {box-shadow: 0px 0px 15px #FF00FF; background-color: #FF0000;} 80% {box-shadow: 0px 0px 15px #008080; background-color: #800080;} 90% {box-shadow: 0px 0px 15px #00FF00; background-color: #2F4F4F;} 100% {box-shadow: 0px 0px 15px #FFFFFF; background-color: #000000;}} .farbig:hover {-webkit-animation-name: farbig; -webkit-animation-duration: 10s; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: infinite; animation-name: farbig; animation-duration: 10s; animation-timing-function: linear; animation-iteration-count: infinite;}
26: Textfeldtransformation
.container {width:200px; height:150px; position:relative;} .textarea {background-color:#FFF; top:50px; left:25px; width:160px; height:35px; position:absolute; border: 2px solid #333; box-shadow: 0px 0px 15px #000; -webkit-transition: all 0.7s ease; transition: all 0.7s ease;} .textarea:focus {background-color:#000030; top:0; left:0; height:150px; width:200px; border-radius:5px; border: 2px solid #d4d0ba; box-shadow: 0px 0px 15px #FFFFFF;}
Ich hoffe, Sie konnten für sich Nutzen daraus ziehen. Wenn Sie teilen oder kommentieren möchten, hier sind die Buttons. Ich wünsche noch einen schönen Tag.
