Anzeige
Anzeige
News
Artikel merken

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.

Von Mario Janschitz
2 Min. Lesezeit
Anzeige
Anzeige


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>
Anzeige
Anzeige

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.

Anzeige
Anzeige
.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.

Anzeige
Anzeige

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.

Anzeige
Anzeige
.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?

Mehr zu diesem Thema
Fast fertig!

Bitte klicke auf den Link in der Bestätigungsmail, um deine Anmeldung abzuschließen.

Du willst noch weitere Infos zum Newsletter? Jetzt mehr erfahren

Anzeige
Anzeige
8 Kommentare
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

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

@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
Abbrechen

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

Bitte schalte deinen Adblocker für t3n.de aus!
Hallo und herzlich willkommen bei t3n!

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

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

Schon jetzt und im Namen der gesamten t3n-Crew: vielen Dank für deine Unterstützung! 🙌

Deine t3n-Crew

Anleitung zur Deaktivierung
Artikel merken

Bitte melde dich an, um diesen Artikel in deiner persönlichen Merkliste auf t3n zu speichern.

Jetzt registrieren und merken

Du hast schon einen t3n-Account? Hier anmelden

oder
Auf Mastodon teilen

Gib die URL deiner Mastodon-Instanz ein, um den Artikel zu teilen.

Anzeige
Anzeige