CSS3 Effekte – Transformationen, Animationen, Übergänge

CSS3 Übergangseffekte

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.

TypBerücksichtigenRückwärtskompatibilitätFür VersionErschienen
transform (2d)-webkit--moz-
-o-
-ms-
FF <= 15
Opera <= 12
IE 9
10/2012
10/2012
03/2011
transform (3d)-webkit--moz-FF <= 1510/2012
transition-webkit-
(für Android/Blackberry)
-moz-
-o-
FF <= 15
Opera <= 12
10/2012
10/2012
animation-webkit--moz-FF <= 1510/2012
backface-visibility-webkit--moz-FF <= 1510/2012
@keyframes-webkit--o-Opera <= 1210/2012
box-shadow--webkit-
(Für zahlreiche Browser)
VerschiedeneVerschiedene

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

James Star - Finanzieller Erfolg 001
.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

James Star - Finanzieller Erfolg 056
.container:hover .bild {
-webkit-transform:scale(1.3); transform:scale(1.3);
} .container {
overflow:hidden; width:200px; height:150px;
} .bild {
-webkit-transition: all 0.7s ease; transition: all 0.7s ease;
}

03: Auszoomen

James Star - Finanzieller Erfolg 026
.container:hover .bild {
-webkit-transform:scale(1); transform:scale(1);
} .container {
overflow:hidden; width:200px; height:150px;
} .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

James Star - Finanzieller Erfolg 018
.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

James Star - Finanzieller Erfolg 011
.bild:hover {
border-top-left-radius: 120px; border-bottom-right-radius: 120px; border-top-right-radius: 15px; border-bottom-left-radius: 15px;
} .bild {
border-bottom-left-radius: 120px; border-top-right-radius: 120px; border-top-left-radius: 15px; border-bottom-right-radius: 15px; -webkit-transition: all 0.7s ease; transition: all 0.7s ease;
}

06: Randverzerrung II

James Star - Finanzieller Erfolg 015
.bild:hover {
border-top-left-radius: 30px 120px; border-bottom-right-radius: 30px 120px; border-bottom-left-radius: 15px; border-top-right-radius: 15px;
} .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

James Star - Finanzieller Erfolg 005
.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)

James Star - Finanzieller Erfolg 007
.bild:hover {
-webkit-transform: rotate(45deg); transform: rotate(45deg);
} .bild {
-webkit-transition: all 0.7s ease; transition: all 0.7s ease;
}

09: Schrägen

James Star - Finanzieller Erfolg 013
.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

James Star - Finanzieller Erfolg 064
.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)

James Star - Finanzieller Erfolg 037
.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 - Finanzieller Erfolg 010

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">
<img class="oberseite" src="img" alt="img"> <p class="unterseite">Text</p>
</div>
</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

James Star - Finanzieller Erfolg 055
.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, 0 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:
  • 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.
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. */

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

James Star - Finanzieller Erfolg 002

James Star

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">
<p class="text">TEXT</p>
</div>
</div>

18: Bild mit Textüberlagerung – Zoomeffekt

James Star - Finanzieller Erfolg 019

James Star

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">
<p class="text">TEXT</p>
</div>
</div>

19: Bild mit Textüberlagerung – Schiebeeffekt

James Star - Finanzieller Erfolg 018

James Star

CSS
.container {
position:relative; overflow:hidden;
} .container .textbox {
width:200px; height:150px; position:absolute; top:0; left:0; margin-top:-160px; 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">
<p class="text">TEXT</p>
</div>
</div>

20: Bild-Text-Verschiebung

James Star - Finanzieller Erfolg 030

James Star

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">
<p class="text">TEXT</p>
</div>
</div>
/* Anmerkung: Um das Bild nach links zu verschieben, folgendes anpassen: .container .textbox {margin-left:210px;}, .container:hover img {margin-left:-210px;} */

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: ease

11: Umformung: cubic-bezier(1,-0.75,0.5,1.2)

James Star - Finanzieller Erfolg 055James Star - Finanzieller Erfolg 055

21: Übergang zwischen zwei Bildern

James Star - Finanzieller Erfolg 014James Star - Finanzieller Erfolg 013
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)

James Star - Finanzieller Erfolg 060James Star - Finanzieller Erfolg 069James Star - Finanzieller Erfolg 012James Star - Finanzieller Erfolg 011James Star - Finanzieller Erfolg 020
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) {-webkit-animation-delay: 8s; animation-delay: 8s;} .container img:nth-child(2) {-webkit-animation-delay: 6s; animation-delay: 6s;} .container img:nth-child(3) {-webkit-animation-delay: 4s; animation-delay: 4s;} .container img:nth-child(4) {-webkit-animation-delay: 2s; animation-delay: 2s;} .container img:nth-child(5) {-webkit-animation-delay: 0s; 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)

James Star - Finanzieller Erfolg 020James Star - Finanzieller Erfolg 011James Star - Finanzieller Erfolg 012James Star - Finanzieller Erfolg 069James Star - Finanzieller Erfolg 060

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) {-webkit-animation-delay: 8s; animation-delay: 8s;} .container img:nth-of-type(2) {-webkit-animation-delay: 6s; animation-delay: 6s;} .container img:nth-of-type(3) {-webkit-animation-delay: 4s; animation-delay: 4s;} .container img:nth-of-type(4) {-webkit-animation-delay: 2s; animation-delay: 2s;} .container img:nth-of-type(5) {-webkit-animation-delay: 0s; 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

James Star - Finanzieller Erfolg 058
@-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;
}

27: Framework für diesen Codeblock

← Codeblock

CSS
.container {
position:relative;
} .container:after {
text-align: center; position: absolute; background:#999; top: 17px; right: -28px; width: 120px; height: 1.6em; font-size: 1.1em; content: "TEXT"; -webkit-transform: rotate(45deg); transform: rotate(45deg);
} .outer, .outer:hover {
-webkit-transition: all 0.7s ease; transition: all 0.7s ease;
} .outer{
color: #000; background: #DDD; overflow: hidden;
} .outer:hover {
color: #FFF; background: #666; overflow: hidden;
} .inner {
max-height: 110px; overflow: auto; -webkit-transition: max-height 1.7s ease; transition: max-height 1.7s ease;
} .outer:hover > .inner {
max-height: 1200px; -webkit-transition: max-height 3.5s ease 0.7s; transition: max-height 3.5s ease 0.7s;
}
HTML
<div class="container outer"> <div class="inner">
Inhalte mit Test-Zeilenumbrüchen: <br><br><br><br><br><br><br> Inhalte enden hier
</div> </div>

28: CSS Tooltip

Got it!

CSS
.tooltip {
position: relative; opacity: 0; color: #FFF; top: -100px; left: 0px; width: 180px; padding: 10px; border-radius: 25px; -webkit-border-radius: 25px; background-color: rgba(0,0,30,0.5); -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: .5s; transition: .5s; -webkit-transform: rotateY(180deg); transform: rotateY(180deg);
} .container .tooltip:after {
position: absolute; top: 100%; left: 45%; height: 0; width: 0; border: 6px solid transparent; border-top: 6px solid rgba(0, 0, 30, 0.5); content: "Awesome!"; white-space: nowrap; color:#DDD;
} .container:hover .tooltip {
opacity: 1; top: -225px; -webkit-transform: rotateY(0deg); transform: rotateY(0deg);
}
HTML
<div class="container">
<img src="" alt=""> <div class="tooltip">
<p class="tooltiptxt">Got it!</p>
</div>
</div>

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.

facebooktwittergoogle_plus

Schreib einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

23 Gedanken zu „CSS3 Effekte – Transformationen, Animationen, Übergänge

  1. Mir gefällt diese Seite wirklich sehr gut.
    Ich programmiere gerade mein eigenes CMS und daher brauche ich natürlich auch solche Effekte!

  2. Das ist die bisher anschaulichste Darstellung des Themas, die ich bisher gefunden habe. Mal schauen wie ich sie umsetze.

  3. hat mir sehr gut gefallen hier. tolle aufteilung von code und beispielen. das thema easing ist exellent erklärt am beispiel der geschw. anzeiger.

    liebe grüsse

  4. wow .. SEHR anschauliche Beispiele. Die Grafiken wirken zwar etwas Word Cliparts / 90er-mäßig, aber gibt eurer Website nen schönen eigenen Charakter 😉

    cu, w0lf.

  5. Ich finde diese Seite auch gut gemacht.
    Die Uebersicht ist sehr hilfreicht.
    Ich wusste nicht,was man mit CSS3 alles machen kann.
    Beispiel 03 und 18 funktionieren bei mir nicht.
    Ich habe es mit einem aktuellen Chromebook getestet.

    1. Hallo Niklas,
      vielen Dank für Ihr Feedback. Damit overflow:hidden; in Beispiel 03 greift, muss dem Container eine Breite/Höhe zugewiesen werden.
      Das Grundgerüst von Beispiel 18 funktioniert in meinen Tests. Ich möchte Sie daher ermutigen, es noch einmal auszuprobieren.
      Freundliche Grüße und viel Erfolg.

  6. Immer wieder besuche ich diese Seite, denn sie ist liebevoll gemacht und eine unglaublich wertvolle Hilfe!

    Die Veranschaulichung von Code und Effekt ist einfach sensationell…! :-)

    Herzlichen Dank dafür…!!!

  7. Diese Seite ist einfach unglaublich.
    …unbegreiflich was alles möglich ist.
    Und ich kämpfe mich schon mit den einfachsten hover ab. :)