Animationen im Web: CSS vs Javascript

von Sarah Schneller | 1 | 9309 Aufrufe

CSS3 bringt Animationen mit sich, die auch von den meisten Browsern (oft mit jeweiligen Browser-Präfix) angenommen werden. Außnahmen sind hier der Internet Explorer 8 und 9, sowie Opera Mini. Werden die CSS Animationen im Browser nicht unterstützt, wird einfach nichts angezeigt. Man sollte also beim Verwenden darauf achten.

Grundsätzlich aber bringt die CSS Animation Vorteile gegenüber Javascript Animationen. Zum einen wird sie vom Browser gesteuert, das heißt ihre Performance ist deutlich besser. Der Browser weiß ob das Fenster, in dem die Animation gezeigt wird gerade sichtbar ist oder nicht, und kann so die Frequenz drosseln oder eben nicht. Außerdem braucht man kein Javascript-Wissen und keine weiteren Plugins, um eine Animation in einer Webseite einzubauen.

Und so funktionierts:

Anzeige Hier werben

1. CSS-Animationen:

1.1. animation:

Zuerst einmal definiert man die Darstellung der Animation in der Funktion @keyframes. Hier kann man Prozente festlegen, wie sich die Animation an diesem Punkt verhalten soll, oder aber nur wie es am Anfang bzw. am Ende aussehen soll. Dabei können so viele Styles übergeben werden, wie man möchte. Im Anschluss definiert man noch die „animation“-Eigenschaft, in der festgelegt wird, wie sich die Animation verhalten soll.

 
css
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
@-webkit-keyframes letsmove {  
   0%   {background:red; left:0px; top:100px; opacity:1;}
   25%  {background:yellow; left:200px; top:100px;}
   50%  {background:blue; left:200px; top:300px;}
   75%  {background:green; left:0px; top:300px; opacity:0;}
   100% {background:red; left:0px; top:100px;}
}

@-moz-keyframes letsmove { 
    0%  {background:red; left:0px; top:100px; opacity:1;}
   25%  {background:yellow; left:200px; top:100px;}
   50%  {background:blue; left:200px; top:300px;}
   75%  {background:green; left:0px; top:300px; opacity:0;}
   100% {background:red; left:0px; top:100px;}
}

@keyframes letsmove {
    0%  {background:red; left:0px; top:100px; opacity:1;}   
   25%  {background:yellow; left:200px; top:100px;}
   50%  {background:blue; left:200px; top:300px;}
   75%  {background:green; left:0px; top:300px; opacity:0;}
   100% {background:red; left:0px; top:100px;}
}
Bild zu Animationen im Web: CSS vs Javascript

//Was passiert hier?
Am Anfang hat unser Element die Hintergrundfarbe rot und sitzt oben links in der Ecke mit einer Transparenz von 100%. Das Element bewegt sich nun im Viereck: von links nach rechts, nach unten, nach links und wieder nach oben. Dabei ändert sich die Farbe und die Transparenz geht, bis sie links unten ist, auf 0 % zurück.

 
css
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
@-webkit-keyframes changeColor {
    from {color:yellow;}
    to {color:turquoise;}
}

@-moz-keyframes changeColor {
    from {color:yellow;}
    to {color:turquoise;}
}

@keyframes changeColor {
    from {color:yellow;}
    to {color:turquoise;}
}
Bild zu Animationen im Web: CSS vs Javascript

//Was passiert hier?
Hier ändert sich lediglich die Textfarbe von Gelb nach Türkis. Wie lang das genau dauert und wie sich die Animation verhält, werden dann im CSS-Teil des zu animierenden Elements festgelegt (nächster Punkt).

Damit die Animation dann auch sichtbar wird, sollte man der zu animierenden Klasse noch Sub-Eigenschaften hinzufügen. Diese sind folgende:

animation-name: String;
Name, der dann in der @keyframes-Regel verwendet wird

animation-duration: time;
Dauer der Animation, Zeitangabe, z.B: 1s, 5s

animation-timing-function: linear | ease | ease-in | ease-out | cubic-bezier(n,n,n,n);
Legt Timing mit Bezierkurven fest

animation-delay: time;
Zwischenzeit nach vollständigem Laden und Start der Animation
Zeitangabe in Sekunden (s) oder Millisekunden (ms)
Bei negativer Zahl, startet die Animation bereits vor dem Laden

animation-iteration-count: number | infinite;
Anzahl der Wiederholungen, Zahl

animation-direction: normal | reverse | alternate | alternate-reverse;
Richtung nach der Animation, nochmal wie zuvor oder zurück

animation-fill-mode: none | forwards | backwards | both;
Welche Styles vor und nach dem Ausführen der Animation auf animiertes Element angewendet werden

animation-play-state: paused | running;
Pausieren oder Starten der Animation

 
css
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
.box {
    width:200px;
    height:200px;
    position:absolute;
    background-color:red;

    -webkit-animation: letsmove 5s ease-in 2;
    -moz-animation: letsmove 5s ease-in 2;
    animation: letsmove 5s ease-in 2;
}

//Was passiert?
ausgeführt werden soll @keyframe letsmove, die Animation dauert 5 Sekunden, klingt etwas nach und wiederholt sich 2 mal

 
css
1
2
3
4
5
h1 {
    -webkit-animation: changeColor 2s ease 1s infinite alternate;
    -moz-animation: changeColor 2s ease 1s infinite alternate;
    animation: changeColor 2s ease 1s infinite alternate;
}

//Was passiert?
ausgeführt werden soll @keyframe changeColor, die Animation dauert 2 Sekunden, verhält sich linear, fängt erst nach 1 Sekunde an, dauert unendlich lang und fängt dann nicht wieder am Anfang an, sondern geht zurück, läuft also rückwärts

1.2. transitions:

Transitions können verwendet werden, wenn sich zum Beispiel die Breite oder die Höhe eines Element verändern soll, wenn sich die Maus auf dem Element befindet. Beziehungsweise wenn sich irgendetwas ändern soll, sobald man über das Element hovert. Sobald sich die Maus nicht mehr über dem Element befindet, setzt sich das Element mit den gleichen Parametern wieder in den Grundzustand zurück.

 
css
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
.box {
    width:200px;
    height:200px;
    position:absolute;
    background-color:red;

    -webkit-transition-property: width;
    -webkit-transition-duration: 2s;
    -webkit-transition-timing-function: ease;
    -webkit-transition-delay: 1s;
    
    transition-property: width;
    transition-duration: 2s;
    transition-timing-function: ease;
    transition-delay: 1s;    
}

.box:hover {
    width:400px;
}

//Was passiert?
Wenn sich die Maus über dem Element befindet, startet nach einer Sekunde eine Animation, die linear verläuft, es ändert sich die Breite des Elements bis 400px und das ganze dauert 2 Sekunden.

Mann kann aber auch mehrere verschiedene Animationen gleichzeitig machen:

 
css
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
.box {
    width: 100px;
    height: 100px;
    background-color: deeppink;

    -webkit-transition: width 0.5s, height 2s, -webkit-transform 2s, background-color 3s; 
    transition: width 0.5s, height 2s, transform 2s, background-color 3s;
}

.box:hover {
    width: 200px;
    height: 200px;
    -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
    transform: rotate(180deg);
    background-color:turquoise;
}
Bild zu Animationen im Web: CSS vs Javascript

//Was passiert hier?
Hier werden Breite, Höhe, Winkel und Hintergrundfarbe animiert. Die Box hat Anfangs eine Breite und Höhe von 100px, und eine Hintergrundfarbe von deeppink. Sobald sich die Maus über der Box befindet, dreht sich die Box einmal um sich selbst, wird breiter und höher und die Farbe ändert sich. Die Breite dauert insgesamt nur eine halbe Sekunde, bis sie die Breite hat, die in .box:hover definiert wird. Höhe und Winkel brauchen 2 Sekunden. Die Farbe braucht 3 Sekunden

Der Gestaltung sind keine Grenzen gesetzt. Viel Spaß beim selbst ausprobieren! Inspirationen, und was sonst noch alles möglich ist, gibt’s hier.

2. jQuery Animationen:

Aber auch Javascript, bzw. die Bibliothek jQuery, bietet einfache Animationsmöglichkeiten. Da gibt es bereits fertige Funktionen, wie zum Beispiel animate() oder slideToggle(). Wichtig: Um jQuery zu nutzen, muss zuerst das jQuery in das HTML Dokument eingebunden werden. Man kann es sich entweder herunterladen und einbinden, oder die Google Libraries dafür verwenden.

2.1. animate()

Mit der Animate-Funktion kann man relativ einfach ein Element animieren. Zuerst wird ein Element im CSS definiert (Größe und Position). Anschließend kann man die Parameter, die sich bei der Animation verändern sollen, sowie die Dauer der Animation mitübergeben. Wenn man allerdings Farben ändern möchte, braucht man das Color-Plugin, das man sich extra herunterladen muss.

Das Prinzip ist folgendes: Man legt für jeden Keyframe einen Style fest, anschließend gibt man noch die Dauer der Animation an (optional). Also: animate({ styles }, time);

 
JavaScript
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
"use strict";
$(document).ready(function() {
    $(".box_js").animate({ 
            left: "600px",
            backgroundColor: "yellow",
            opacity:0.75
            }, 1250)
        .animate({
            top: "300px",
            backgroundColor: "blue",
            opacity:0.3
            }, 1250 )
        .animate({
            top: "300px",
            left: "400px",
            backgroundColor: "green",
            opacity: 0
            }, 1250 )
        .animate({
            top: "100px",
            backgroundColor: "red",
            opacity: 1,
            }, 1250 );          
});
Bild zu Animationen im Web: CSS vs Javascript

//Was passiert?
Das gleiche wie bei der CSS Animation mit der Box oben: Am Anfang hat unser Element die Hintergrundfarbe rot und sitzt oben links in der Ecke mit einer Transparenz von 100%. Das Element bewegt sich nun im Viereck: von links nach rechts, nach unten, nach links und wieder nach oben. Dabei ändert sich die Farbe und die Transparenz geht, bis sie links unten ist, auf 0 % zurück.

2.2. kleinere Animationen

Wenn man nur kleinere Animationen braucht, wie zum Beispiel etwas performant anzeigen und wieder verschwinden lassen, eignen sich die jQuery Funktionen show() / hide() und slideToggle().

show()
Hier wird das Element auf display:“block“ gestellt, wenn man zusätzlich noch eine langsame Zeit oder „slow“
dazuschreibt, sieht man dazu noch einen Effekt, dass sich das Bild von links oben langsam aufbaut.

hide()
Das selbe wie show() nur umgekehrt (das Element verschwindet)

slideToggle()
Das Element verkleinert sich, wenn es sichtbar ist, nach oben, bis es nicht mehr sichtbar ist. Wenn es nicht sichtbar ist,
vergrößert es sich nach unten.

Fazit:

CSS Animationen sind super, wenn man eben schnell eine Animation in seine Webseite einbringen möchte, und kein Javascript beherrscht. Wer allerdings möchte, dass seine Webseite auch schön im Internet Explorer 9 und niedriger angezeigt wird, sollte auf jQuery zurückgreifen. Ein weiterer Nachteil der CSS-Animation ist der viele Code. Denn für Firefox, Chrome und Safari müssen die Zusätze -moz-, bzw. -webkit- extra angelegt werden. Für längere Animationen ist CSS übersichtlicher, da hier alle Keyframes in einer Funktion stehen. Bei jQuery müssen die Keyframes jeweils einzeln angelegt werden. Komplexere Animationen, die zu einem bestimmten Event gestoppt werden oder reagieren sollen sind weiterhin nur mit Javascript/ jQuery möglich.

Download Test Datei:

Downloads

Für diesen Artikel stehen zusätzliche Dateien zum Herunterladen bereit. Der Download ist nur für registrierte Benutzer möglich. Die kostenlose Registrierung dauert nur wenige Sekunden.

Über den Autor: Sarah Schneller
Supervising Technician for Dynamic Frontend Development bei Team23 in Augsburg
Profilseite betrachten