UX Audit

Wir trainieren dein Team? Buch unsere Workshops, Trainings und Coachings.

Zeigt her!
Close

Bildanimationen mit CSS

3. Juli 2014, von stephan

Das Bewegtbild ist aus dem Internet nicht mehr wegzudenken. Spätestens nach dem Aufkommen von Videoheadern – also vollformatigen Videos als Hintergrund von Webseiten – und der Renaissance von animierten GIFs ist immer mehr Inhalt auf Webseiten in Bewegung. Mit einer wenig beachteten Möglichkeit, subtile Animationen zu erzeugen und dabei die Nachteile von Videos und GIFs zu umgehen, werde ich mich in diesem Blogbeitrag beschäftigen: CSS Animationen in Bildern.

CSS Animationen

Bei CSS Animationen in Bildern wird zunächst das zu animierende Element mit einem Bildeditor freigestellt. Das Konzept hinter diesen Animationen beruht auf dem Prinzip, einige Bildelemente mittels CSS3 zu bewegen, zu drehen & mit Effekten (z.b. Blur) zu belegen, um so einem sonst statischen Bild Dynamik zu verleihen. Die Ästhetik solcher Bilder ähnelt derer von Cinemagraphs, also GIFs, bei denen kleine, isolierte Bereiche eines Bildes in einer Endlosschleife abgespielt werden, während sich der Rest des Bildes nicht bewegt.

Die Limitationen dieser Technik werden im Beispiel offensichtlich: Anders als bei Videos oder animierten GIFs wirkt die Szene trotz Animation eher statisch. Realistische Verformungen oder z.B. perspektivische Wechsel der animierten Objekte wäre nur sehr schwer zu realisieren.

Vorteile gegenüber Videos & animierten GIFs

Um genauer auf die Vorteile dieser Technik gegenüber den anderen Möglichkeiten einzugehen, müssen wir uns kurz mit der Technik hinter diesen Methoden beschäftigen. GIFs sind eine (bezogen auf das Alter des Internets) sehr alte Methode, Bewegtbild ins Netz zu bringen. Ein animiertes GIF beinhaltet mehrere, voneinander komplett unabhängige Bilder, die in einer vom Autor definierten Geschwindigkeit hintereinander abgespielt werden. GIFs können nur 256 Farben beinhalten, sind aber durch die Vielzahl an aufeinanderfolgenden Bildern dennoch relativ gr0ß (eine kurze Szene in kleiner Auflösung kann schnell einige Megabyte haben) – also nicht ideal für das Internet.
Videos basieren auf dem selben Konzept, haben aber einen entscheidenden Vorteil: Während die Frames bei GIFs unabhängig voneinander abgespeichert sind, bauen die einzelnen Frames von Videos aufeinander auf und sparen damit sehr viel Speicherplatz (Diesen Umstand macht sich auch Twitter zu nutze, und wandelt animierte GIFs beim Hochladen in Videos um).

CSS Animationen in Bildern bestehen im Normalfall aus einem einzigen Bild und kleinen, freigestellten Elementen die seperat abgespeichert sind. Der wirkliche Vorteil dieser Technik liegt daher in der Größe der erzeugten Animationen.

Aufwendige Erstellung

Die Erstellung von CSS Animationen ist vor allem zeitaufwendig und benötigt je nach Motiv Fertigkeit bei der Bildretusche. Durch die speziellen Anforderungen an Motiv und zu animierendes Objekt eignen sich nur wenige Bilder für CSS Animationen. Auch die realistische Bewegung des Objekts mit CSS3 ist nicht immer einfach.
Überall wo die Bandbreite knapp ist und ein Videoheader nicht aus konzeptioneller oder ästhetischer Sicht unumgänglich ist sind CSS Bildanimationen aber eine sehr gute Alternative, um die Webseite etwas dynamischer erscheinen zu lassen.
Vor allem in Zukunft werden es CSS Animationen aber eher schwer haben: Die ständige Weiterentwicklung und Verbesserung von Videoformaten wird immer kleinere und qualitativ bessere Videos hervorbringen. Auch die Komplexität der Erstellung die Einiges an Fachwissen voraussetzt und sehr aufwendig ist spricht auf lange Sicht gegen eine große Verbreitung dieser Technik.

Du willst mit jemanden über das Thema plaudern?

Einen kostenlosen Termin mit CEO Susanne vereinbaren!

Stephan

Meine Rolle bei Liechtenecker: langgedienter Frontend-Veteran Wenn es weder IT noch Digitalisierung gäbe, wäre mein Beruf: Förster ohne Kontakt zu Menschen! Mein Herz schlägt für: die Arterien.
2 Kommentare.
Kommentar verfassen
Name
Mail
Web
Captcha
Erfolgreich!
Fehler!
7. Juli 2014 um 12:45

Also mir persönlich gefallen die CSS Animation gerade deswegen besser, als zB Video, weil sie eben nur kleine Animationen sind. Ich will ja auch nur mit so einer Animation Aufmerksamkeit auf einen speziellen Ort ziehen, und nicht den User aus der Seite reißen. Ist zumindest meine Ansicht.

Jetzt antworten
Antwort verfassen
Name
Mail
Web
Captcha
Erfolgreich!
Fehler!
    Stephan Schimpf
    7. Juli 2014 um 15:57

    Hi Andi,
    das stimmt! Mir persönlich gefallen ja auch die angesprochenen Cinemagraphs gerade deswegen sehr gut.
    Liebe Grüße,
    Stephan

Technologie – Blogbeitrag

Die Macht von PHPStan: Fehlererkennung und Codequalität in der PHP-Entwicklung

21. März 2024, von Daniel

In der Welt der Webentwicklung ist die Qualität des Codes von entscheidender Bedeutung. Schlecht geschriebener Code kann zu Bugs, Sicherheitslücken und ineffizienter Leistung führen. PHPStan ist ein leistungsstarkes statisches Analysetool, das dazu beitragen kann, die Codequalität zu erhöhen und Bugs frühzeitig zu erkennen. In diesem Beitrag werden wir uns genauer ansehen, welche Arten von Fehlern PHPStan erkennen kann und welche Aufgaben möglicherweise andere Tools übernehmen müssen.

Jetzt lesen
Liechtenecker Leseliste #62 mit Susanne Liechtenecker
Inspiration – Podcasts

Folge #62 mit Susanne Liechtenecker

27. November 2020

In Folge 62 besinnt sich Susanne auf die Anfänge dieses Podcasts und begrüßt keinen Gast, sondern erzählt über das Buch "Jäger, Hirten, Kritiker" von Richard David Precht und warum es sie inspiriert hat.

Jetzt anhören
Close