Animationen mit HTML5 und CSS3 – ganz ohne JavaScript
Ich habe jüngst das Buch »Die Tricks der Internet-Künstler« von Frank Puscher aus dem Jahre 1999 hervorgekramt und wiedergelesen. Zusammen mit dem ein Jahr davor erschienenen Buch »Cascading Style Sheets – Layouts für das Webpublishing« von Håkon Wium Lie (dem »Erfinder« der CSS) und Bert Bos hatte es mich seinerzeit (die beiden Bücher sind über zwanzig Jahre alt) sehr beeindruckt und beeinflußt. Ich begann damals selber, seltsame Seiten mit CSS und HTML zu basteln. Dank der Tatsache, daß es meistens statische Seiten waren, sind einige davon sogar heute noch im Netz zu finden.
Doch schon damals beklagte Frank Puscher:
Inzwischen hat sich das Web leider auf breiter Front vom Hypertext-Konzept verabschiedet. Statt in einer vernetzten Hyperstruktur, zeigen sich die meisten Web-Sites im Kleid einer hierarchischen Anordnung, die an oberster Stelle eine Homepage, darunter Rubrikseiten und darunter Inhaltsseiten zeigt. Wie gottgewollt wird diese Struktur heute zum Standard und Dogma in der Site-Produktion erklärt, dabei verdient jede andere Seitenstruktur mindestens ebensoviel Beachtung wie die hierarchische. Hauptsache, der User kommt dahin, wohin er will und das steht im Einklang mit dem Vermittlungsbedürfnis des Site-Autors.
Ich gebe ihm ja Recht, aber ich glaube, wir haben vor allen Dingen das Spielen verlernt, das Spielen mit den Elementen einer Website, wie es Puscher an vielen Stellen in seinem Buch vorführt. Daher möchte ich eine neue kleine Reihe hier beginnen, in der ich das Spielen wieder erlernen möchte.
Inzwischen hat sich das Web weiterentwickelt. Schockwave und Flash haben das Zeitliche gesegnet und wurden durch HTML5 abgelöst. Heute möchte ich daher zeigen, wie man eine einfache Animation nur mit HTML5 und CSS3 erzeugt, ganz ohne JavaScript.
Zuerst habe ich mir eine einfache HTML5-Seite gebastelt, die nur zwei Elemente enthält, eine Überschrift und das Bild der Luftballons, die es zu animieren gilt:
<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="styles.css"> <title>Ballonflug</title> </head> <body> <h1>Ballonflug</h1> <div class="actor"> <img class="balloons" src="images/balloons.png"> </div> </body>
Die eigentliche Action findet in der CSS-Datei statt:
body { background: url(images/backgroundcolorgrass.png); font-family: arial; } h1 { color: #ff0000; text-align: center; } img.balloons { height: 200px; animation-name: slidein; animation-duration: 20s; animation-timing-function: linear; animation-iteration-count: infinite; /* animation: slidein 20s linear infinite; */ } @keyframes slidein { from { margin-left: 100%; } to { margin-left: -20%; }
Wenn man diese Seite startet, gleiten die Ballons majestätisch von rechts nach links durch das Browserfenster. Wenn sie den linken Rand verlassen haben, tauchen sie am rechten Rand wieder auf. Ihr könnt Euch das hier ansehen.
Das alles findet in der Klasse .balloons und in der Animation @keyframes slidein statt: slidein sagt eigentlich nur, daß sich die Animation von rechts nach links bewegen soll, die Animationseigenschaften in der Klasse .balloons sind der Schlüssel: Die Zeit der einzelnen Animation soll 20 Sekunden dauern, die Animation soll linear ablaufen (notwendig, weil die Default-Einstellung ease ist) und sie soll sich immer wieder wiederholen. CSS-Profis würgen das alles natürlich in eine Zeile (ich habe sie auskommentiert im Quellcode gelassen), aber ob diese Kürze noch dem Verständnis dient, wage ich zu bezweifeln.
Falls Ihr das Nachprogrammieren wollt, Ihr findet wie gewohnt den Quellcode und alle Assets in meinem GitHub-Repositorium.
Ich gebe ja zu, das Ganze ist völlig sinnbefreit. Aber Spielen muß ja nicht immer mit einem Sinn und Zweck behaftet sein.
Credits: Die Idee zu diesem Beitrag verdanke ich dem wunderbaren Tutorial »Dark and Stormy Night with CSS Animations« von Kelly Lougheed und bei der Erkundung der CSS-Animations-Eigenschaften hat mir das SelfHTML-Wiki geholfen. Das Hintergrundbild stammt aus dem freien Set Background Elements Redux von Kenney.nl und das Bildchen der Ballons ist von Xavier Sautereau, der es auf OpenGameArt.org als Public Domain (CC0) veröffentlicht hat.
Über …
Der Schockwellenreiter ist seit dem 24. April 2000 das Weblog digitale Kritzelheft von Jörg Kantel (Neuköllner, EDV-Leiter Rentner, Autor, Netzaktivist und Hundesportler — Reihenfolge rein zufällig). Hier steht, was mir gefällt. Wem es nicht gefällt, der braucht ja nicht mitzulesen. Wer aber mitliest, ist herzlich willkommen und eingeladen, mitzudiskutieren!
Alle eigenen Inhalte des Schockwellenreiters stehen unter einer Creative-Commons-Lizenz, jedoch können fremde Inhalte (speziell Videos, Photos und sonstige Bilder) unter einer anderen Lizenz stehen.
Der Besuch dieser Webseite wird aktuell von der Piwik Webanalyse erfaßt. Hier können Sie der Erfassung widersprechen.
Diese Seite verwendet keine Cookies. Warum auch? Was allerdings die iframes von Amazon, YouTube und Co. machen, entzieht sich meiner Kenntnis.
Werbung
Werbung
