It’s #FrontendFriday – Animationen und Transitions
es ist wieder Freitag, somit #FrontendFriday und heute schauen wir uns wieder Animationen und Transitions an.
Wozu brauchen wir Animationen?
Animationen sind aus unserem Alltag kaum noch wegzudenken. Zum Beispiel sind sie nicht einfach nur schön zum Anschauen, sondern können auch sehr positiv zur UX beitragen. Wenn man zum Beispiel einen Artikel in den Einkaufswagen legen möchte, können hier Animationen helfen, dem User verstehen zu geben, dass dieser gerade einen Artikel in den Einkaufswagen gelegt hat. Eine weitere Situation sind Ladebalken, welche den User während dem warten bei Laune halten können. Als letzte Situation kann man sich eine Animation auf Buttons vorstellen. Hier kann man bei einem „CLICK„, das Gefühl vermitteln, dass dieser Button ausgelöst wurde. Somit kann man dem User die Fragen ersparen: „Habe ich den Button jetzt gedrückt? Ist der Button überhaupt auslösbar oder ist der deaktiviert?„
Wann sollten Animationen abgespielt werden?
Animationen können aber auch als störend angesehen werden, deswegen sollte man diese immer in Maßen genießen. Wie sagt man so gerne: „Manchmal ist weniger mehr!„. Außerdem sollten Animationen immer einen Sinn ergeben und eine Funktion erfüllen. Außerdem sollte es keine unnötigen Animationen geben.
Wie lange sollte meine Animation gehen?
Bestimmt hat man schonmal eine fancy Webseite besucht bei der man sich denkt: „Wie lange soll ich hier denn noch warten, ich wollte nur einen Button drücken?!„. Deswegen spielt bei Animationen die Dauer eine wichtige Rolle. So sollten sie nie zu kurz sein, ansonsten bekommt der User nichts mit. Dennoch sollte der User auch nicht warten müssen. Als guten Richtwert kann man sagen, dass die meisten Animationen eine Dauer zwischen 100ms und 500ms haben sollten. Außerdem sollten kleinere Effekte wie hover, fading oder scaling Effekte eine kürzere Dauer bekommen und größere//komplexere Animationen sollten mehr Zeit bekommen.
Library für Animationen
In einer der letzten #FrontendFridays wurde animate.css als Geheimtipp nahegelegt, diese Library habe ich mir dann noch mal genauer angesehen. Hiermit kann man sehr leicht Animationen hinzufügen und diese dann auch später anpassen. Die Funktionalität liegt darin, dass animate.css css-klassen hinzufügt. In denen ist dann die eigentliche Animation beschrieben. Hier ein Auszug aus der „rotateIn“ Animation, welche ich auch in dem Beispiel verwendet habe (https://github.com/daneden/animate.css/blob/master/source/rotating_entrances/rotateIn.css):
@keyframes rotateIn {
from {
transform-origin: center;
transform: rotate3d(0, 0, 1, -200deg);
opacity: 0;
}
to {
transform-origin: center;
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
.rotateIn {
animation-name: rotateIn;
}
So würde ein Beispiel aussehen, indem man die Animationen über einen Button auslöst:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Animate</title>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css'>
<style>
h1,
h2,
p {
font-family: "Segoe UI";
}
#animateDiv1{
background-color: #00a5e1;
height: 100px;
width: 100px;;
}
</style>
<script>
function animate1() {
document.getElementById("animate1").classList.add('animated', 'rotateIn')
}
function animate2() {
document.getElementById("animate2").classList.add('animated','lightSpeedIn')
}
function animate3() {
document.getElementById("animate3").classList.add('animated','fadeOut')
}
</script>
</head>
<body>
<h1 id="animate1">Test 1</h1>
<br>
<h2 id="animate2">Test 2</h2>
<br>
<p id="animate3">Test 3</p>
<br>
<div id="animateDiv1" class="animated infinite pulse"></div>
<br>
<Button onclick="animate1()">Animate 1</Button>
<Button onclick="animate2()">Animate 2</Button>
<Button onclick="animate3()">Animate 3</Button>
</body>
</html>
Was haben wir heute gelernt?
-Man sollte Animationen nicht vernachlässigen, dennoch sollte man es nicht übertreiben. Außerdem gibt es echt coole Libraries die uns den Alltag um einiges erleichtern können.
Wir wünschen euch noch einen wundervollen Freitag und einen guten Start ins Wochenende :-)
