CSS3-Animationen mit und ohne JavaScript

12.09.2014 10:22 Uhr Daniel Koch

Moderne Web-Applikationen setzen vermehrt auf Animationen. Dank CSS3 und entsprechender Frameworks wie Animate.css und Magic lassen sie sich mittlerweile vergleichsweise einfach umsetzen und das häufig sogar völlig ohne JavaScript.

CSS3-Animationen mit und ohne JavaScript

Animationen können – wenn man sie an den richtigen Stellen und vor allem sparsam einsetzt – den Mehrwert einer Webseite durchaus erhöhen. Ein typisches Beispiel dafür stellt die Animation von Social- Media-Buttons [1] dar. Interessant sind CSS3-Animationen aber unter anderem auch für Portfolio- Präsentationen [2].

Bislang musste man für sie auf JavaScript zurückgreifen. Frameworks wie jQuery erleichtern hier zwar mittlerweile die Arbeit, dennoch bleiben die Probleme bestehen, die es im Zusammenhang mit JavaScript gibt. (Exemplarisch seien dabei die Benutzer genannt, die in ihren Browsern JavaScript deaktiviert haben.) CSS3 verspricht mit dem Arbeitsentwurf CSS Animations [3] Abhilfe.

Portfolio-Präsentationen lassen sich mit CSS3-Animationen ansprechend gestalten (Abb. 1)

Animationen bestehen in CSS immer aus zwei Elementen: einem Stil, über den die Animation beschrieben wird, und einem Set von Keyframes. Über letzteres kann der Nutzer Start, Zwischenpositionen und Ende des gewünschten Effekts bestimmt. Der große Vorteil der CSS-Animationen ist dabei zweifellos ihre gute Performance, die vor allem im Vergleich mit durch Skripte umgesetzten Animationen deutlich wird.

@keyframes fade-in {
   0% {opacity: 0}
   100% {opacity: 1}
}
a {
   animation: fade-in 1s;
}

Ein Wort zum Browser-Support: Animationen lassen sich in aktuellen Browsern nutzen. Lediglich der Internet Explorer bis einschließlich Version 9 streikt. Damit Animationen in möglichst vielen Browsern laufen, sind die bekannten Präfixe zu verwenden.

div {
   width: 100px;
   height: 100px;
   background: red;
   -webkit-animation: myfirst 5s; /* Chrome, Safari, Opera */
   animation: myfirst 5s;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes myfirst {
   from {background: red;}
   to {background: yellow;}
}
/* Standard-Syntax */
@keyframes myfirst {
   from {background: red;}
   to {background: yellow;}
}

Der Einsatz der Präfixe bedeutet für Entwickler einen nicht unerheblichen Mehraufwand, außerdem bläht er die CSS-Syntax auf und macht sie unübersichtlich. Abhilfe kann das 2 KByte große Skript -prefix-free [4] schaffen. Es überprüft die mit link oder style eingebundenen Stylesheets und fügt die benötigten Präfixe automatisch hinzu. -prefix-free funktioniert mit Internet Explorer ab Version 9, Opera 10+, Firefox 3.5+, Safari 4+ und Chrome.

Aber Achtung: Vor dem Einsatz des Skripts sind in jedem Fall auch dessen Nachteile zu berücksichtigen. So dauert es eine Weile, bis -prefix-free die Stylesheets durchlaufen hat. Anschließend wird der Browser angewiesen, das von ihm bereits verarbeitete Stylesheet neu zu rendern. Das führt zu Verzögerungen, die durchaus negativ auffallen (können). Es ist daher unbedingt zu prüfen, wie nachteilig die Auswirkungen auf das eigene Projekt sind. Gerade während der Entwicklungsphase und im Testbetrieb leistet das Skript jedoch gute Dienste. Um -prefix-free einzusetzen, ist lediglich die heruntergeladene Skript-Datei einzubinden.

Bewegung mit Animate.css

Will man Animationen mit CSS umsetzen, stellt sich immer die Frage des Aufwands. Um ihn so gering wie möglich zu halten, eignen sich entsprechende Frameworks, die die Definition von CSS-Animationen erleichtern. Eines der bekanntesten Animations-Frameworks ist derzeit Animate.css, das ausschließlich auf CSS setzt. (Wobei bereits an dieser Stelle darauf hingewiesen werden muss, dass man Animate.css in Kombination mit JavaScript nutzen kann. Mehr dazu im Anschluss.)

Das Framework wird unter der MIT-Lizenz angeboten und lässt sich kostenlos verwenden. Mit 71 KByte ist es zwar nicht eben klein, aber durchaus noch im Rahmen. Zudem gibt es eine minimierte Variante von 56 KByte Größe.

Builds und Effektauswahl

Der personalisierte Build

Animate.css ist eine Grunt [5]-Anwendung. Bei Grunt handelt es sich um einen sogenannten Task-Runner. Einmal richtig konfiguriert, überwacht er sämtliche Dateien und überprüft beispielsweise auch JavaScript-Code auf Fehler. Kein Wunder, dass Grunt mittlerweile als Plug-in für zahlreiche Anwendungen wie LESS, Sass und CoffeeScript verfügbar ist. Dank ihm lassen sich personalisierte Builds des Frameworks erstellen.

Damit Grunt seine Aufgabe erfüllen kann, ist es via npm [6] zu installieren. Dafür wird das Framework Node.js in einer Version >= 0.8.0 vorausgesetzt. Ausführliche Informationen zur Grunt-Installation und -Konfiguration gibt es auf der Projektseite [7].

$ cd pfad/zu/animate.css/
$ sudo npm install

Als Nächstes wird grunt watch aufgerufen, um die Änderungen durchzuführen und den eigenen Build zu erstellen. Sollen beispielsweise ausschließlich die beiden Effekte attention_seekers und bouncing_entrances im Build enthalten sein, muss der Nutzer die Konfigurationsdatei animate-config.json entsprechend anpassen.

"attention_seekers": {
  "bounce": true,
  "flash": false,
  "pulse": false,
  "shake": true,
  "swing": true,
  "tada": true,
  "wobble": true
}
"bouncing_entrances": {
  "bounceIn": true,
  "bounceInDown": true,
  "bounceInLeft": true,
  "bounceInRight": true,
  "bounceInUp": true
}

Tatsächlich sind innerhalb der Konfigurationsdatei animate-config.json von Hause aus sämtliche Effekte aufgeführt, die Animate.css zu bieten hat. Aus Gründen der besseren Performance nimmt man aber am besten nur die Effekte mit auf, die man tatsächlich benötigt.

Eine Auswahl an Effekten

Die Projekt-Website [8] vermittelt einen ersten Eindruck von der Leistungsfähigkeit des Frameworks und den verfügbaren Effekten. Nachdem es eingebunden wurde, lässt sich Animate.css vergleichsweise einfach verwenden.

<link rel="stylesheet" href="css/animate.min.css" />

Dem gewünschten Element wird zunächst die Klasse animated zugewiesen. Als zweite Klasse muss man den Namen des anzuwendenden Effekts angeben.

<div class="animated fadeInLeft">...</div>

Typische Optionen sind fadeInLeft, zoomOut, hinge usw. Auf der Demo-Webseite [9] sind die verfügbaren Effekte und somit die Klassennamen aufgeführt.

Auch das Triggern von Animationen, nachdem ein Benutzer eine Aktion durchgeführt hat, ist möglich. Die einfachste Variante stellt dafür das bekannte CSS-Pseudoelement :hover dar. Vorteil dabei: Die Animationen lassen sich ohne den Einsatz von JavaScript realisieren.

.content:hover{
   -webkit-animation-name: swing;
   -moz-animation-name: swing;
   -ms-animation-name: swing;
   -o-animation-name: swing;
   animation-name: swing;
   -webkit-animation-iteration-count: infinite;
   -moz-animation-iteration-count: infinite;
   -ms-animation-iteration-count: infinite;
   -o-animation-iteration-count: infinite;
   animation-iteration-count: infinite;
}

Das gezeigte Beispiel löst beim eintretenden hover-Ereignis, also dann, wenn man mit dem Mauszeiger über das Element fährt, eine Swing-Animation aus. Die Dauer der Animationen lässt sich ebenfalls verändern:

#content {
   -webkit-animation-duration: 3s;
   - webkit-animation-delay: 2s;
   - webkit-animation-iteration-count: infinite;
}

Im obigen Ausschnitt sind die Animationslänge, die Dauer der Verzögerung und die Anzahl der Wiederholungen (im Beispiel ist es übrigens eine Endlosschleife) festgelegt.

Zusammenspiel mit JavaScript

Zusammenspiel zwischen Animate.css und JavaScript

Animate.css kann man ganz ohne JavaScript betreiben. Das ist allerdings kein Muss. Tatsächlich lässt es sich gut mit der Skriptsprache kombinieren. So ist Animate.css auch auf den Einsatz von jQuery vorbereitet.

Zum Beispiel lassen sich Animationen mit dem bekannten Framework dynamisch in Anwendungen einfügen:

$('#content').addClass('animated bounceOutLeft');

Auch AngularJS lässt sich zusammen mit Animate.css nutzen. Von Hause aus sind Animationen in AngularJS nicht ohne weiteres umzusetzen. Hauptgrund dafür ist die etwas komplizierte Anwendung der Winkeldefinitionen. Durch die Kombination von AngularJS mit Animate.css entfallen sie:

div[ng-view].ng-enter {
    -webkit-animation: fadeInRight 0.5s;
    animation: fadeInRight 0.5s;
}

Ein wenig komplexer stellt sich die Angelegenheit dar, wenn Inhalte dynamisch zu verstecken oder hinzuzufügen sind.

.ng-hide-remove {
    -webkit-animation: bounceIn 2.5s;
    animation: bounceIn 2.5s;
}
.ng-hide-add {
    -webkit-animation: flipOutX 2.5s;
    animation: flipOutX 2.5s;
    display: block !important;
}

Entscheidend ist hier die !important-Anweisung, die das standardmäßig auf ng-hide-add angewendete display: none überschreibt.

Mit Wow.js [10] gibt es eine JavaScript-Bibliothek, mit der man Animate.css individuell steuern kann. (Es lässt sich auch für andere Animations-Anwendungen verwenden, wofür allerdings eine Anpassung des Skripts nötig ist.) Entwickelt wurde sie, um Anwendungen, bei denen Animationen durch Scrollen ausgelöst werden, leichter erstellen zu können. Das Skript ist gerade einmal 3 KByte groß.

Um Wow.js einzusetzene, bindet man es nach animate.css ein und aktiviert es:

<link rel="stylesheet" href="css/animate.css">
<script src="js/wow.min.js"></script>
<script>
 new WOW().init();
</script>

Damit sind die Funktionen des Projekts auf der Webseite verfügbar und lassen sich nutzen. Dazu weist man dem Element, das erst beim Scrollen sichtbar werden soll, die Klasse wow zu:

<div class="wow">Das ist der Elementinhalt</div >

Zusätzlich lässt sich mit Animate.css der gewünschte Effekt festlegen:

<div class="wow bounceInUp">Das ist der Elementinhalt</div >

Mit data-Attributen bietet Wow.js weitere Einstellmöglichkeiten. Über sie lassen sich die Animationsdauer (data-wow-duration), die Verzögerung der Animation (data-wow-delay), der Aktivierungsmoment (data-wow-offset) und die Anzahl der Durchläufe (data-wow-iteration) festlegen.

<section class="wow slideInLeft" data-wow-duration="2s" 
data-wow-delay="5s"></section>
<section class="wow slideInRight" data-wow-offset="10" 
data-wow-iteration="10"></section>

Wem die genannten Möglichkeiten nicht genügen, der kann eigene CSS-Animationen verwenden. Dafür lassen sich dem Skript die gewünschte Klasse, die sichtbaren Elemente und der geplante Offset übergeben.

wow = new WOW( {
    boxClass:     'wow',  
    animateClass: 'animated', 
    offset:       0          
  }
)
WOW.init();

(Wie die beschriebene Aktion aussieht, lässt sich beispielsweise auf dieser [11] Webseite betrachten.)

Magic und weitere Alternativen

Magic als Alternative

Animate.css wird hauptsächlich für kleinere Animationen verwendet. Bei komplexeren Anwendungen kann das noch recht neue Framework Magic eine gute Alternative sein. Dabei handelt es sich ebenfalls um eine einfache CSS-Bibliothek. Will man die Fähigkeiten von Magic allerdings ausreizen, kommt man nicht ohne den Einsatz von JavaScript aus. (Damit es nicht zu Missverständnissen kommt: Es geht natürlich auch ohne JavaScript, allerdings ist man dann auf das :hover-Event begrenzt.)

Magic unterteilt die zur Verfügung gestellten Effekte in Kategorien wie Bling, Static, Perspective, Rotate und Slide. Sie lassen sich auf einer Beispielseite des Projekts [12] auf ein Grafikelement anwenden und so ausprobieren.

Mittlerweile hat Magic 55 verschiedene Effekte zu bieten, wobei in naher Zukunft weitere hinzukommen sollen. Sie reichen von einfachen statischen bis hin zu solchen, durch die sich die Perspektive auf ein Element verändert. Zugegebenermaßen hätte man sich die Demo-Webseite etwas spektakulärer gewünscht. Die doch sehr einfach daherkommende Beispiel-Anwendung ändert allerdings nichts daran, dass die verfügbaren Effekte durchaus gelungen sind.

Die Bibliothek – die übrigens unter der MIT-Lizenz angeboten wird und sich somit frei verwenden lässt – steht auf einer GitHub [13]-Seite zum Download zur Verfügung. Um die Effekte nutzen zu können, muss man die Bibliothek zunächst wie folgt einbinden:

<link rel="stylesheet" href="css/magic.css">

Die Standardversion hat eine Größe von 96 KByte. In der minimierten Variante ist die Datei nur noch 77 KByte groß, weshalb man sie häufig für den Live-Betrieb wählt. Während der Entwicklungsphase des Projekts ist hingegen der Einsatz der normalen Datei empfehlenswert. So lässt sich rasch ein Blick auf die in der CSS-Datei definierten Effekte werfen, um beispielsweise zu verstehen, was im Hintergrund eigentlich passiert. Die meisten der Magic-Effekte sind tatsächlich nur in Kombination mit JavaScript sinnvoll. jQuery scheint dabei der eindeutige Favorit der Magic-Entwickler zu sein. Ein Beispiel:

$('.content').hover(function () {
  $(this).addClass('magictime puffIn');
});

Im Beispiel wird der Effekt puffInnach dem hover-Event mit jQuery ausgelöst. Die Klasse magictime legt letztlich die Dauer der Animation fest. Sie ist in magic.css beziehungsweise magic.min.css definiert.

.magictime {
   -webkit-animation-duration: 1s;
   -moz-animation-duration: 1s;
   -ms-animation-duration: 1s;
   -o-animation-duration: 1s;
   animation-duration: 1s;
   -webkit-animation-fill-mode: both;
   -moz-animation-fill-mode: both;
   -ms-animation-fill-mode: both;
   -o-animation-fill-mode: both;
   animation-fill-mode: both;
}

Standardmäßig ist in der Bibliothek eine Effektdauer von einer Sekunde vorgesehen. Bei einigen könnte die Länge tatsächlich etwas zu kurz geraten sein – in den Fällen lässt sich die Bibliotheksdatei entsprechend anpassen.

.magictime {
   -webkit-animation-duration: 3s;
   -moz-animation-duration: 3s;
   -ms-animation-duration: 3s;
   -o-animation-duration: 3s;
   animation-duration: 1s;
}

Die Zeitangaben müssen dabei übrigens nicht global definiert sein. Sie lassen sich tatsächlich auch individuell für einzelne Effekte verändern.

.magictime.magic {
   -webkit-animation-duration: 10s;
   -moz-animation-duration: 10s;
   -o-animation-duration: 10s;
   animation-duration: 10s;
}

Von Hause aus starten die Animationen sofort. Bei Bedarf lässt sich eine Verzögerungszeit definieren.

setTimeout(function(){
    $('.content').addClass('magictime puffIn');
}, 5000);

Mit dem obigen Codeausschnitt starten die Animationen nach fünf Sekunden.

Normalerweise laufen die Animationen exakt einmal. Alternativ dazu kann man sie aber auch in einer Endlosschleife abspielen lassen.

setInterval(function(){ 
   $('.content').toggleClass('magictime puffIn');
}, 3000 )

Aufgrund der – selbst in der minimierten Variante – recht umfangreichen Datei sollte man sich überlegen, ob man alle Effekte benötigt.

Leider gibt es für Magic kein spezielles Build-Tool. Sollen nur einige wenige Effekte genutzt werden, empfiehlt es sich, sie manuell in seine eigene CSS-Datei einzufügen. Bei einem Update der Bibliothek sind die Änderungen dann erneut durchzuführen.

Alternative Frameworks und Desktop-Software

Selbstverständlich sind die vorgestellten Projekte Animate.css und Magic nicht die einzigen Frameworks, mit denen sich CSS-Animationen umsetzen lassen. Der große Vorteil der beiden ist allerdings, dass sie bei Bedarf völlig ohne zusätzliches JavaScript auskommen. All diejenigen, die eine CSS-JavaScript-Kombination nicht stört, sei eine Übersichtsseite bei CodeGeekz [14] empfohlen. Dort werden 15 Bibliotheken vorgestellt, auf deren Basis sich Animationen umsetzen lassen – dann allerdings meist unter Zuhilfenahme von JavaScript.

Es müssen allerdings nicht immer Skripte sein, auch Desktop-Software ist für Webanimationen zu finden. Eines der bekanntesten Tools dürfte dabei Adobe Edge Animate [15] sein. Zwar ist es prinzipiell ein allgemeines Webdesign-Werkzeug, allerdings bietet es neben den "üblichen" Funktionen, die man von einem Programm dieser Kategorie erwarten darf, auch all das an, was für das Erstellen von CSS-Animationen nötig ist. Für die Realisierung der Animationen setzt Adobe Edge Animate auf ein auf jQuery basierendes Framework. Die gelieferten Ergebnisse sind in den aktuellen Versionen des Internet Explorer, Firefox, Safari und Chrome lauffähig. Abspielen lassen sie sich darüber hinaus aber auch auf Smartphones und Tablets mit Android, iOS und BlackBerry OS.

Fazit

Speziell für Mobiles

Wer seine Animationen hauptsächlich für mobile Endgeräte konzipiert, sollte einen Blick auf den Sencha Animator [16] werfen. Auch dieses Tool unterstützt die aktuellen Browser. Zudem laufen die Animationen gut auf Smartphones und Tablets. Für all diejenigen, die auf Nummer sicher gehen und ihre Animationen in Flash und HTML5/CSS3 anbieten wollen, ist der MotionComposer [17] interessant. Das Tool stellt zunächst einmal eine einfach zu bedienende, grafische Benutzeroberfläche zur Verfügung. Die erstellten Animationen werden im Gegensatz zu den anderen Werkzeugen in einer Flash- und einer CSS3-Version ausgeliefert. Die CSS3-Variante zeigen nur solche Browser an, die Flash nicht unterstützen. Das Tool läuft allerdings nur unter Mac OS X.

Es gibt darüber hinaus natürlich noch zahlreiche andere Animationswerkzeuge. Viele von ihnen decken dabei ganz bestimmte Nischen ab. Sollen beispielsweise 3D-Objekte animiert werden, hilft Tridiv [18] weiter.

Dreidimensionale Objekte sind die Spezialität von Tridiv (Abb. 2)

Vergleichbare Tools stehen auch für die Animation von Listen, Bildern usw. zur Verfügung. Und selbstverständlich hat man auch bei Google die Zeichen der Zeit erkannt. Der Google Web Designer [19] kommt daher ebenfalls mit einer guten Unterstützung für CSS-Animationen daher. Das Tool befindet sich derzeit allerdings noch im Beta-Stadium.

Fazit

CSS3-Animationen – seien sie nun mit oder ohne JavaScript realisiert – sind längst salonfähig geworden. Kein Wunder, schließlich laufen sie in modernen Browsern, ob mobil oder Desktop. Eines gilt aber auch in diesem Zusammenhang: Animationen sollten nicht zum Selbstzweck eingesetzt werden. Verwenden sollte man sie dort, wo sie die User Experience und die Usability von Webanwendungen fördern und unterstützen.

Da der Internet Explorer bis einschließlich Version 9 keine CSS-Animationen darstellen kann, sind Fallbacks für Nutzer dieser Browser zu erstellen. (Der Fairness halber sei ausdrücklich darauf hingewiesen, dass ältere Versionen von Chrome und Firefox ebenfalls nichts mit den CSS-Animationen anfangen können. Allerdings sind ältere Versionen dieser Browser eben nicht so stark verbreitet wie der alte IE.) Alternative Varianten lassen sich beispielsweise per JavaScript realisieren. Animations-Frameworks, die zusätzlich auf JavaScript setzen, haben entsprechende Fallback-Ansätze meist bereits mit an Bord.

Daniel Koch
arbeitet als freiberuflicher Entwickler und Autor. (jul [20])

URL dieses Artikels:
https://www.heise.de/-2390410

Links in diesem Artikel:
[1] http://demo.marcofolio.net/social_css3_display/
[2] http://sarasoueidan.com/demos/horizontal-portfolio-layout/
[3] http://www.w3.org/TR/css3-animations/
[4] http://leaverou.github.io/prefixfree
[5] http://gruntjs.com/
[6] https://npmjs.org/
[7] http://gruntjs.com/getting-started
[8] http://daneden.github.io/animate.css/
[9] http://daneden.github.io/animate.css/
[10] http://mynameismatthieu.com/WOW/
[11] http://www.streamlineicons.com/
[12] http://www.minimamente.com/example/magic_animations/
[13] https://github.com/miniMAC/magic
[14] http://codegeekz.com/15-best-javascript-animation-libraries-for-developers/
[15] https://creative.adobe.com/products/animate
[16] http://www.sencha.com/products/animator/
[17] http://www.aquafadas.com/en/motioncomposer/
[18] http://tridiv.com/
[19] http://www.google.com/webdesigner
[20] mailto:jul@heise.de