In diesem Blogpost berichte ich über CSS Animationen. Ich habe das Thema gewählt, da ich es in der TBZ brauche und Animationen zwar kenne, jedoch nie genauer angeschaut. Mit Animationen hat man auf einer Website einen besseren Benutzererlebnis, da Menschen dazu tendieren mit einer dynamischen Umgebung besser zu interagieren. Die Webseite kommt durch Animationen “zum Leben”. Ich finde es beispielsweise besser, wenn ich ein animierten Ladevorgang habe, statt ein standardmäßigen Ladebildschirm.
Was sind Animationen?
CSS-Animationen sorgen dafür, dass ein Element sein Stil zu einem anderen in eine bestimmte Zeitspanne ändert. Das können Veränderungen an das Aussehen oder auch Bewegungen sein. Durch sie ist die Webseite dynamischer und lebendiger. Die CSS Transition Property (Übergangseigenschaft) sorgt aber schon für Bewegungen und Veränderungen auf einer Webseite, wozu gibt es jetzt aber Animationen?
Animationen habe nämlich ihre Vorteile gegenüber Transition:
- Mit Animationen hat man mehr Kontrolle über den Prozess
- Flexibler und dynamischer
- Transitions sind für einfache Aufgaben gedacht, während Animationen komplexer sein können
- Transitions können nur die an ihnen verbundene Eigenschaften ändern. Animationen können aber CSS-Eigenschaften und Werte innerhalb der Keyframes ändern
- Transitions sind in folgende Zustände gebunden: Start, Ende und Dauer. Animationen hingegen sind abhängungslos von einem Zustand, sie können jederzeit vorkommen
- Animationen können Schleifen bilden
Um Animationen mit CSS zu erstellen braucht man folgendes:
- Keyframes: Definieren den Stil oder Aussehen des Elements in jeder Phase der Animation
- Properties: Animationseigenschaften, die mit dem Keyframe verbunden sind
- Duration: DIe Zeitdauer des gesamten Vorgangs/der Animation
Wie funktionieren Animationen?
Wenn ein Keyframe definiert ist, wird die Animationssequenz in Prozent definiert. Da wird der Start- und Endverlauf der Animation festgelegt. Als Startwert ist standardmässig 0% und als Endwert ist es 100%. Dazwischen kann man weitere Zwischenwerte angeben, wie z.B. 50%, 70% usw. Der Browser weiss somit, was er bei 50% oder 70% des Keyframes machen muss. Man kann auch mehrere Keyframes für ein Element erstellen.
Einfache Animation
In diesem Beispiel zeige ich eine einfache Animation. Eine Box mit runden Ecken bekommt zuerst spitze Ecken, danach wieder runde und rollt in 360°. Währenddem es seine Form und Rotation ändert, ändert es auch seine Farbe.
CSS Code:
div {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
border-radius: 50%;
animation: rollingball linear 3s infinite alternate;
}
@keyframes rollingball {
0% {
left: 0px;
transform: rotate(0);
}
25% {
background: purple;
border-radius: 0;
}
75%{
background: orange;
}
100% {
background: green;
left: 300px;
transform: rotate(360deg);
}
}
In diesem Beispiel sieht man, dass sich die Box (oder Ball) nur in die rechte Richtung bewegt. Die Bewegungsanimation existiert also nur von “left: 0px” bis “left: 300px”, besser gesagt existiert die Animation nur vom Startpunkt bis zum Endpunkt. Wenn es den Endpunkt erreicht, geht es wieder zurück zum Startpunkt, weil die Iterationsanzahl der Animation auf “infinite” gesetzt wurde. Es setzt die Box aber zurück auf 0, also existiert da keine Animation. Vielleicht will man das machen, aber hier möchte ich, dass sich die Box immer weiter von links nach rechts und wieder links bewegt. Dafür wird die Eigenschaft “animation-direction: alternate“ verwendet:
*Ich benutze die abgekürzte Animation Property “animation: …”, statt dass ich für jede Property eine zusätzliche Zeile schreibe. Weitere Informationen: https://www.w3schools.com/cssref/css3_pr_animation.asp
Suhejlsblog 