Fading Images - CSS3 Tutorial - Auf- und Abblenden von Bildern ohne JavaScript

Fading Images - CSS3 Tutorial ohne JavaScriptCSS3 is pushing the Web - Ob Shopbetreiber mit Produktdetailseiten, Reiseportale mit Landingpages für bestimmte Reiseziele oder selbstständige Designer oder Fotografen, mit der Möglichkeit von Interessenten online über ihr Portfolio kontaktiert und somit gebucht zu werden, die Möglichkeiten für einen Einsatz des heute vorgestellten visuellen Effektes auf Basis von CSS3 sind vielfältiger Natur. Und das nicht nur weil es möglich ist und Spaß macht, sondern weil es auch wie bspw. in Bezug auf die Performance, offensichtliche Vorteile mit sich bringt. Denn das heutige CSS3 Tutorial hat sich es daher zur Aufgabe gemacht, einen Effekt der bisher immer auf Basis von JavaScript realisiert wurde, mittels CSS3 zu lösen - die Rede ist von der Überblendung (faden) von Elementen, wie bspw. Bildern.

Modernes Webdesign mit CSS - Das neue Buch!

Bevor ich an dieser Stelle mit dem HTML-Code zu diesem Tutorial beginne, möchte ich ganz Martin Neuhof einem Fotografen aus Leipzig für die zur Verfügungstellung der wunderschönen Bildmotive, aus seiner Serie "kubanische Gesichter", danken! Denn ein solcher Effekt ist ohne entsprechend hochwertiges Bildmaterial nicht viel Wert und verliert somit an Aufmerksamkeit und somit unter Umständen an Effektivität. Das gilt für ein Portfolio ebenso, wie für eine Produktdetailseite! Aber nun zurück zum HTML-Code ;o)

CSS3 Tutorial - Step 1: Definieren der HTML-Struktur - Fading Images

Das HTML-Grundgerüst dieses Bereiches ist denkbar einfach. In einem bestimmten Bereich einer Webseite, wie in diesem Fall einer möglichen "Bühne" (#stage) einer Webseite, werden daher die später mittels CSS zu überblendenden Bilder (siehe folgenden Abbildung) untereinander angelegt.

Fading Images - CSS3 TutorialAbb. 1: Die drei bei diesem Tutorial verwendeten Bilder von Martin Neuhof

Der Einfachheit halber und zum besseren Verständnis für die Betrachter dieses CSS Tutorials, werden die drei verwendeten Bilder (siehe Abbildung 01) durchnummeriert und entsprechend der Reihenfolge im HTML-Code nacheinander angelegt.

Code-Beispiel
...
<div id="stage">
    <img src="image-fading-cuba-01.jpg" alt="kubanische Gesichter 01" />
    <img src="image-fading-cuba-02.jpg" alt="kubanische Gesichter 02" />
    <img src="image-fading-cuba-03.jpg" alt="kubanische Gesichter 03" />
</div>
...

CSS3 Tutorial - Step 2: Ausrichten der Bühne und enthaltenen Bilder

Der Bereich der "Bühne" (#stage) der die Bilder, für die spätere Überblendung (fade) enthalten soll, wird als erstes relativ ausgerichtet (position:relative). Dann werden die Bilder darin absolut ausgerichtet. Der z-index für die Stappelung wird auf "1" gesetzt, damit man dann wie im verlinkten Beispiel am Ende dieses Tutorials, die Möglichkeit hat mit z-index und dem Wert "2" bspw. noch eine Element wie eine Überschrift darüber legen kann. Kleiner Tipp am Rande, sofern nicht bereits bekannt: Das Element mit dem höchsten z-index Wert liegt oben! Die Maße für die Höhe und Breite entsprechen in diesem Fall der Bildermaße und der Größe der Bühne.

Fading Images
#stage {
  position: relative;
}
#stage img {
  position: absolute;
  z-index: 1;
  left:0;
  top:0;
  width:650px;
  height:300px;
}

Zum jetzigen Zeitpunkt wären alle drei Bilder dieses CSS3 Tutorials mit den identischen Eigenschaften übereinander gestapelt, weshalb nun lediglich die dritte Abbildung (image-fading-cuba-03.jpg) sichtbar wäre. Da sich die Bilder aber überblenden sollen und somit den visuell den Eindruck hinterlassen, dass diese ineinander übergehen, muss wird im nächsten Schritt diesem Element die CSS3 Eigenschaft Animation hinzugefügt.

CSS3 Tutorial - Step 3: Anlegen der Animationseigenschaften

Das gewünschte Verhalten von zu überblendenden Bildern, den sogenannten "fading images", kann über verschiedene Wege erreicht werden. Bei Interaktionen durch den Anwender, wie MouseOver oder bei Berührung mit dem Finger (Touchgesten) bei mobilen Endgeräten wie einem Tablet oder Smartphone, könnte man auch das CSS3 Module Transitions verwendenden, denn dann kann man der jeweiligen Aktion, bspw. mit :hover, individuelle neue Eigenschaften wie eine Überblendung zukommen lassen. In unserem heutigen Fall, soll dieser Effekt aber auch ohne Aktion durch den Betrachter ablaufen. Daher fällt an dieser Stelle die Wahl auf das CSS3 Module Animation. Mit dem Wert "ease-in-out" für den zeitlichen Verlauf der Animation, wird eine kubische Bezierkurve beschrieben, nach welcher die entsprechenden Zwischenwerte der Animation berechnet und das Verhalten bei der Einblendung der Elemente ausgeführt werden. Da diese Animation unbegrenzt sein soll, wird die Eigenschaft animation-iteration-count mit dem dazugehörigen Wert "infinite" verwendet. Sollte die Animation nur einmalig ausgeführt werden, ist kein Wert notwendig und diese Zeile könnte entfallen. Die letzte Zeile ist sicherlich am leichtesten zu verstehen - sie gibt lediglich die Dauer für einen "Durchlauf der Animation" an. In diesem Fall sind dies, um den Effekt des Überblendens noch ein wenig zu verlängern, exakt 30 Sekunden.

Fading Images
#stage img {
  ...
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration:30s;
}

Hinweis: Um aktuell vollste Unterstützung dieser Eigenschaft zu erlangen ist es wichtig, dass ihr für CSS3 Animations explizit alle Browser mit den entsprechenden Vendor-Prefixes (bspw. -webkit-, -moz- ) anlegt. Wer vorausschauend arbeitet, könnte dies auch für -ms- (Internet Explorer) oder -o- (Opera) tun. So wäre eine größtmögliche Kompatibilität für diesen Effekt gewährleistet und das auch wenn die Browser(versionen) etwas älter sein sollten. Einige der aktuellen Browser (wie bspw. Google Chrome), verstehen in der Regel diese Eigenschaft auch bereits ohne Vendor-Prefix. Der besseren Lesbarkeit der Eigenschaften dieses CSS3 Tutorials geschuldet, werden an dieser Stelle nicht alle möglichen Vendor-Prefix-Schreibweisen mit aufgeführt. Das am Ende verlinkte Beispiel dieses Tutorials, besitzt hingegen sämtliche Vendor-Prefixe, damit all diejenigen die einen Browser mit Unterstützung dieser CSS3 Eigenschaft besitzen, dieses auch ansehen können. In diesem Blog sind dies aktuell immerhin knapp 90%. Als nächstes definieren wir nun noch einen Namen für diese Animation. Diesem werden dann im weiteren Verlauf die entsprechenden Eigenschaften zugewiesen. Der Einfachheit halber und zum besseren Verständnis werden die einzelnen drei Animationen durchnummeriert (jedes Bild bekommt also eine "eigene Animation" zugewiesen). Hierfür verwenden wir die Pseudoklasse nth-of-type, mit deren Hilfe es möglich ist, dass n-te gleichartige Elementes zu selektieren.

Fading Images
#stage img:nth-of-type(1) {
  animation-name: fadingAnimation01;
}
#stage img:nth-of-type(2) {
  animation-name: fadingAnimation02;
}
#stage img:nth-of-type(3) {
  animation-name: fadingAnimation03;
}

Auf diese Weise wird der Einsatz von Klassen für die einzelnen Bilder unnötig und man behält seinen performanten HTML-Code.

CSS3 Tutorial - Step 4: Anlegen der Animation für eine Überblendung

Als nun letzten Schritt, wird den drei stattfindenden Animtionen (jedes Bild besitzt einen eigenen Ablauf der Animation), die ihr jeweiliger Zustand der Einblendung zugewiesen. Wie bereits oben erwähnt gibt es fast immer verschiedene Wege zum Ziel zu gelangen, so auch in diesem Fall. Um den ablauf einer Animation und den Überblendungseffekt am besten beschreiben zu können und somit hoffentlich verständlich zu machen, habe ich mich dazu entschlossen diesen Überblendungseffekt (fading images) über das Verändern der Transparent (opacity) zu realisieren. Das heißt, die einzelnen Bilder werden zu entsprechenden Zeitpunkten der 30 sekündigen Animation werden über diese Eigenschaft, ein- bzw. ausgeblendet. Der "raffinierte" daran ist, dass bevor die erste Abbildung (fadingAnimation01) nach 16% der Animation beginnt sich bis zu 33% der Animation auszublenden, beginnt im Gegensatz das zweite Bild (fadingAnimation01) ab 16% der Animation sich bis zu 33% der Animation einzublenden. Bei circa. 25% der Animation ist somit das erste Bild zur Hälfte bereits "transparent geworden", während die zweite Abbildung zu diesem Zeitpunkt zur Hälfte bereits "sichtbar" geworden ist (siehe Abbildung 02). Der Wechsel von zweiten zum dritten und vom dritten zum ersten Bild, findet auf identische Weise statt - nur eben zu einem späteren Zeitpunkt der 30 Sekunden dauernden Animation.

Fading Images - Animationsverhalten
@keyframes fadingAnimation01 {
  0%  { opacity:1;}
  16%  {opacity:1;}
  33%  {opacity:0;}
  50%  {opacity:0;}
  67%  {opacity:0;}
  84%  {opacity:0;}
  100%  {opacity:1;}
}
@keyframes fadingAnimation02 {
  0%  { opacity:0;}
  16%  {opacity:0;}
  33%  {opacity:1;}
  50%  {opacity:1;}
  67%  {opacity:0;}
  84%  {opacity:0;}
  100%  {opacity:0;}
}
@keyframes fadingAnimation03 {
  0%  { opacity:0;}
  16%  {opacity:0;}
  33%  {opacity:0;}
  50%  {opacity:0;}
  67%  {opacity:1;}
  84%  {opacity:1;}
  100%  {opacity:0;}
}

Ich hoffe die Vorstellung der Umsetzung dieses zwar bereits bekannten visuellen Effektes der "fading images" auf Basis von CSS3 Animation hat Euch gefallen.

Fading Images - CSS3 Tutorial - Überblendung zweier BilderAbb. 2: Zustand bei der Überblendung vom ersten zum zweiten Bild

Wer mehr über solche Animationen auf Basis von CSS3 erfahren möchte, dem kann ich nur wärmstens mein aktuelles Buch Modernes Webdesign mit CSS empfehlen, hier wimmelt es nur so vor CSS3 ;o)

Fading Images Tutorial

Browser Support dieses CSS3 Tutorials

Fairerweise muss man natürlich auch die Browserunterstützung erwähnen, die sich für das CSS3 Animation Module von Google Chrome, über Safari bis hin zum Firefox erstreckt. Von den relevanten Browsern unterstützen ohne JavaScript Opera und der Internet Explorer diese Eigenschaft (noch) nicht.

CSS Browser-Support - CSS3 AnimationBrowserunterstützung des CSS3 Animation Module

Ich hoffe Euch hat dieses kleine CSS3-Tutorial gefallen und vielleicht dazu beigetragen, ein wenig über den bisher bekannten Tellerrand, JavaScript-basierte Überblendungen, zu schauen. In diesem Sinne, viel Spaß und viel Erfolg im Umgang mit CSS!

Weitere Artikel zum Thema CSS3 Animation
  1. Susanne 13 Mär 2012, 12:57

    Das nenne ich ein Tutorial was sich sehen lassen kann. Selbst für mich gut und verständlich geschrieben. Und da ich auch im Besitz einer aktuellen Google Chrome Version bin, komme ich auch in den Genuss des hier beschriebenen Effektes. Klasse!


  2. Thomas 13 Mär 2012, 13:25

    mit unterschiedlichen animation-delay-Werten für die einzelnen Bilder kann man auf eine einzelne Keyframe-Definition zurückgreifen (evtl. kann man das animation-delay + animation-duration sogar als (serverseitig generierte) inline-styles bei den einzelnen Bildern angeben, damit man das CSS bei mehr/verschiedenen Bildern/Slideshows nicht anpassen muss).

    animation-delay wird leider soweit ich weiss noch nicht wirklich von Browsern unterstützt


  3. Webstandard-Team
    13 Mär 2012, 13:30

    @Thomas: Danke für dein Feedback. "animation-delay" wird durchaus bereits untertsützt und wäre für die Vorstellung dieses Effektes auch eine Alternative gewesen, allerdings wollte ich des besseren Verständnisses wegen, auf den oben beschriebenen Ansatz zurück greifen.


  4. Andy 13 Mär 2012, 14:09

    Hallo,

    die Anleitung ist wirklich Klasse. Ich versuche verzweifelt die Bilder mit einem Beitrag zu verlinken. Das klappt aber nicht wirklich. Kannst du mit helfen?

    Gruß
    Andy


  5. Åsel
    13 Mär 2012, 18:15

    Danke für die Anleitung, ich werde es ausprobieren! Grüsse aus Norwegen!


  6. Harryman 13 Mär 2012, 19:45

    Danke für die Anleitung.
    So etwas Einfaches und Präzises habe ich schon länger gesucht.

    Gruß Harry


  7. Patrick Zorn
    16 Mär 2012, 16:26

    Erstmal: Wie bisher fast alle Tutorials...einfach nur gut :-) Keine unnötigen Phrasen, gute Erklärung und überschaubarere Code.
    Ich wusste gar nicht, dass du Buchautor bist. Hab ich was verpasst, war das schon immer so? ^^


  8. Webstandard-Team
    16 Mär 2012, 16:32

    @Patrick: Danke für das Lob zum Tutorial! Ja ich bin auch Autor, des hier an verschiedenen Stellen beworbenen Buches "Modernes Webdesign mit CSS". Und ja, damit hast du wohl etwas verpasst. Es sei denn du kaufst es Dir noch. Lohnen tut es sich auf jeden Fall, vor allem dann wenn dir die Tutorials hier schon eh immer gefallen haben ;o)


  9. PW 16 Mär 2012, 16:55

    Das ist schon echt genial was man mit CSS3 alles erreichen kann ohne auf Javascrpt oder andere Techniken zurückgreifen zu müssen. Leider muss man oft auf Grund von der mangelnden Unterstützung des IE auf solche tollen Funktionen verzichten.


  10. david 20 Mär 2012, 08:56

    Hallo!

    Sehr GUT DANKE!!


  11. Patrick Zorn
    21 Mär 2012, 19:53

    @Heiko

    Das mit dem "hab ich was verpasst" war eigentlich nicht auf das Buch bezogen :-). Aber ich habs mir mal angeschaut, leider erkenne ich nicht, ob es sich hier um Webdesign allgemein handelt, oder speziell um CSS3 und HTML5. Ohne dir hier zu Nahe treten zu wollen, aber du hast dir bestimmt auch schonmal ein Buch bestellt, dass groß umworben wurde und du nachher Gedacht hast: "Na super, das hab ich in den letzten 2 Monaten alles schonmal irgendwo im Web gelesen" oder noch schlimmer "Tolle Werbung, alter Inhalt" :-P

    Mein letztes Buch über Webdesign ist schon ein wenig älter, HTML 5 und CSS 3 wurden hier gerade so angesprochen á la "Kommt irgendwann, mehr kann Ihnen der Autor nicht sagen".
    Mal konkret gefragt: HTML5, CSS3, PHP, allgemeines Design, SEO....welche Themen davon werden behandelt? Ich will mir nämlich demnächst mal wieder ein gutes Buch in der Richtung besorgen, schwanke aber gerade zwischen 2.
    Gibts noch andere Bücher von dir? Vielleicht kenn ich ja eins.


  12. jandi 22 Mär 2012, 21:38

    Ist wirklich erstaunlich wie sich dank CSS3 viele interessante Effekte und vor allem Animationen mit sehr geringem Aufwand erstellen lassen.


  13. Carsten 31 Mär 2012, 15:19

    THX für das tut, kann ich echt gut gebrauchen und endlich auch mal eins das wirklich ausführlich ist ! Werd ich bei mir im Blog mal austesten


  14. GB Bilder 01 Apr 2012, 17:38

    Danke für dieses ausführliche Tutorial. CSS3 ist einfach genial


  15. hanno 09 Apr 2012, 13:47

    jau, photoshop ist halt das killer tool und du hast alles prima beschrieben - allerdings ist das spätere vertaggen der bilder mindestens genau so wichtig!


  16. Hias 17 Apr 2012, 09:41

    Finde es immer wieder super was mit CSS wirklich machbar ist (und man meint immer es muss alles Javascript sein).
    Das Buch sieht interessant aus, mal gucken ob ich mal drüberstolpere ;).


  17. Sri 22 Apr 2012, 16:47

    Meine Herren!
    Wirklich interessantes tutorial!! Wenn mal überlegt, was jetzt mit CSS 3 und dem Html5 alles machbar ist, kommen da sicherlich noch ein richtige hammerwebseiten auf uns zu, die einem die sprache verschlagen werden.

    Wirklich gut.

    Sri


  18. Carsten 22 Apr 2012, 22:23

    Super Tutorial,

    vielen Dank, das werde ich demnächst mal auf meinem Blog testen. Javascript ist ja immer so eine Sache. Aber nur CSS3 ist natürlich eine ganz andere Sache und dadurch auch interessanter für einen tatsächlichen Einsatz :)

    Gruß
    Carsten


  19. Caristen 22 Mai 2012, 15:04

    Was soll das für ein Tutorial sein? Der am meist benutze Browser wird einfach nicht unterstützt.. wofür soll sowas gut sein? Wer kann das gebrauchen?? Ich hasse diesen verdammten Internet Explorer!


  20. Björn 15 Okt 2012, 09:18

    Moin,

    ich habe das hier ausprobiert, aber irgendwie funktioniert das nicht - das CSS Sheet fängt mit #stage an, über #stage img, zu den nth-of-type und schlussendlich den Keyframes - trotzdem überblendet bei mir nichts.

    Wo liegt der Fehler? Habe ich die einzelnen Images im HTML nicht korrekt verlinkt?

    Bitte um Hilfe - das Tutorial ist ja soweit extrem gut... .

    Beste Grüße,

    Björn


  21. Sandra
    09 Nov 2012, 00:44

    Der Ansatz ist gut, aber leider ist mir die Browser-Kompatiblität nicht genug ausreichend, denn auf den IE kann ich einfach nicht verzichten - somit werde ich weitersuchen, aber dennoch danke dass Du dieses How-To so reichhaltig und ausführlich beschrieben hast!


  22. Jörn 16 Feb 2013, 08:00

    Ich habe die Animationen gerade nach dem Tutorial erstellt und es läuft alles einwandfrei.
    Vielen Dank für diese kleine Anleitung!

    Aber natürlich habe auch ich das Problem, dass der Bildwechsel im Internet Explorer nicht angezeigt wird.

    Gibt es hierfür mittlerweile eine Lösung bzw. kann man die hier beschriebene Vorgehensweise so abwandeln, dass auch der IE damit umgehen kann?


  23. Horst Wettig 16 Feb 2013, 13:46

    Weiß jemand eine Alternative in der auch der Internet-Explorer funktioniert? Würde mich extrem dafür interessieren - gerne auch direkt per email


  24. Ben Mueller 08 Okt 2013, 13:46

    @Horst: Leider habe ich (noch) keine wirklich brauchbare Alternative für bzw. mit dem IE gefunden - aber ich habe die Suche noch nicht aufgegeben...


  25. Jonas 07 Jan 2014, 15:59

    Super Tutorial! Allerdings gehts auch etwas kürzer. Dafür gibt es soweit ich weiß einige jQuery Plugins die ganz nützlich sind, habe ich ebenfalls benutzt, der Name fällt mir leider grade nicht ein :/


  26. Simone 23 Feb 2014, 23:27

    Hey das Tutorial und das Endergebnis ist wirklich klasse! Bei mir klappt das ganze leider im Dreamwaver und Firefox nicht :( ich vermute ich habe an irgendeiner Stelle einen Fehler mit den Vendor Prefix -moz gemacht. Wäre es möglich, den gesamten CSS-Code für Firefox optimiert hier online zu stellen?
    Beste Grüße,
    Simone


  27. Simone 23 Feb 2014, 23:45

    Vorheriger Artikel aktualisieren:

    Hab den Fehler ;) Klappt alles prima!


Artikel kommentieren





HTML ist erlaubt und ausdrücklich erwünscht, wobei folgende Tags eingesetzt werden können: <a href="" title=""></a> <b></b> <cite></cite> <code></code> <em></em> <strong></strong>


authimage