Entwicklung & Design

Animationen ohne Javascript mit animate.css

Im User-Interface-Design benutzt man Animationen, um den Fokus eines Users auf bestimmte Elemente zu lenken oder die allgemeine User-Experience zu erhöhen. Heute zeigen wir euch wie ihr Animationen auch mit CSS machen könnt.


JavaScript sei Dank, ist es uns als Entwickler möglich, die User-Experience unserer Kunden mit Animationen zu erhöhen. Aber gerade für einfache Animationen wie einen klassischen Fade-In oder -Out kann JavaScript einen unnötigen Overhead darstellen. Abhilfe schafft hier „animate.css“, eine kleine, aber feine CSS-Library, die den Alltag von Entwicklern vereinfachen soll. Im Unterschied zu Transit.js basieren alle Animationen auf reinem CSS und bringen somit „nur“ die klassischen Vendor-Probleme mit sich – allerdings ist „animate.css“ bereits „Cross-Browser“-fähig. Mit 32 Kilobyte in der „Vollversion“ ist die Library kein Leichtgewicht, allerdings bietet „animate.css“ die Option von „Custom-Builds“. Damit kann man die Library anpassen und somit auch verkleinern. Beachtet aber, dass gerade bei mobilen Geräten Animationen nicht gerade flüssig ablaufen können, außer es wird mit CSS3 und der Hardware-Beschleunigung gearbeitet – aber nun zu „animate.css“ selbst.

Animate.css_-_Custom_Build-small

„Custom-Build“-Option von animate.css. (Screenshot: daneden.me/animate/)

DOM-Objekte mit CSS animieren

Die Implementierung in ein bestehendes Projekt ist sehr einfach. Nach dem Einbinden der Library animierst du Objekte einfach mit einer .animated-Klasse, gefolgt von der Angabe des Klassennamens des gewünschten Effektes.

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

Und hier der Code den du nicht mehr schreiben musst:

@-webkit-keyframes fadeInLeft {
0% {
opacity: 0;
-webkit-transform: translateX(-20px);
}

100% {
opacity: 1;
-webkit-transform: translateX(0);
}
}
@-moz-keyframes fadeInLeft {
0% {
opacity: 0;
-moz-transform: translateX(-20px);
}

100% {
opacity: 1;
-moz-transform: translateX(0);
}
}

@-o-keyframes fadeInLeft {
0% {
opacity: 0;
-o-transform: translateX(-20px);
}

100% {
opacity: 1;
-o-transform: translateX(0);
}
}

@keyframes fadeInLeft {
0% {
opacity: 0;
transform: translateX(-20px);
}

100% {
opacity: 1;
transform: translateX(0);
}
}

.animated.fadeInLeft {
-webkit-animation-name: fadeInLeft;
-moz-animation-name: fadeInLeft;
-o-animation-name: fadeInLeft;
animation-name: fadeInLeft;
}

Animation durch Interaktion

Oft will man eine Animation „triggern“, nachdem der Benutzer eine Interaktion durchgeführt hat. Eine einfache Methode hierfür ist das Benutzen des :hover-Pseudo-Elements. Damit kannst du eine Animation schnell und einfach umsetzen, auch ohne JavaScript einsetzen zu müssen.

.deine-klasse: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;
}

Dieses Snippet erzeugt bei Mouse-Hover eine unendliche „Swing“-Animation. Bei komplexeren Bedingungen muss allerdings auf JavaScript zurückgegriffen werden.

animate.css + JavaScript

Um die Vorteile beider Welten nutzen zu können, kannst du mit altbewährter JavaScript-Syntax die CSS-Library weiterverwenden.

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

animate.css erweitern

Du kannst natürlich auch eigenen CSS-Code verwenden, um Animationen anzupassen oder zu überschreiben. Hiermit kannst du zum Beispiel das Timing deiner Animationen besser abstimmen.

.delay-medium{
-webkit-animation-delay:1s;
-moz-animation-delay:1s;
-ms-animation-delay:1s;
-o-animation-delay:1s;
animation-delay:1s
}
.delay-long{
-webkit-animation-delay:1.2s;
-moz-animation-delay:1.2s;
-ms-animation-delay:1.2s;
-o-animation-delay:1.2s;
animation-delay:1.2s
}

Fazit

Die einfachen „Out-Of-The-Box-Animationen“ sind schnell und leicht umzusetzen, um deiner Website den letzten Schliff verabreichen zu können. Ein „Custom-Build“ erlaubt es dir auch nur einige wenige Animationen zu verwenden. Unter Verwendung von JavaScript können einige gute Effekte erzielt werden. Ihr könnt euch animate.css von Github herunterladen. Auf der offiziellen Seite von animate.css könnt ihr euch einen Eindruck über alle verfügbaren Animationen verschaffen.

Was denkt ihr von „animate.css“? Schnickschnack oder nützlich?

Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

8 Kommentare
Chris
Chris

Was denn nun?
Überschrift: Animationen OHNE Javascript mit animate.css
Fazit: Unter Verwendung von JavaScript können einige gute Effekte erzielt werden

Durchaus widersprüchlich

Antworten
cephei
cephei

@Chris
JavaScript kommt nur zum Einsatz um bessere Trigger-funktionen zu haben. Mit CSS bist du halt sehr eingeschränkt um Events auszulösen. Steht eigentlcih sehr deutlich im Text.

Antworten

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.

Bitte schalte deinen Adblocker für t3n.de aus!

Hey du! Schön, dass du hier bist. 😊

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team bestehend aus 65 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Danke für deine Unterstützung.

Digitales High Five,
Stephan Dörner (Chefredakteur t3n.de) & das gesamte t3n-Team

Anleitung zur Deaktivierung