CSS Animationen erstellen – Ein Anfänger-Tutorial

Daniel - LerneProgrammieren
April 6, 2020

CSS3 macht es sehr einfach, komplexe Animationen selbst zu erstellen, um Webseiten interaktiv zu machen. Hört sich kompliziert an? Im Gegenteil. In wenigen Minuten kannst du deine eigenen CSS-Animationen erstellen. In diesem Anfänger-Tutorial zeige ich dir, was du zum Animieren von Elementen benötigst.

Du wirst diese CSS3-Animation selbst bauen:

1. Klicke hier um die Animation zurückzusetzen.
2. Klicke dann hier um die Animation erneut zu starten

Animationen bestehen aus zwei Komponenten:

einem Stil, der die CSS-Animation definiert und
einer Reihe von Keyframes, die den Anfangs- und Endpunkt der Animation (sowie mögliche Zwischen-Keyframes) anzeigen.

Vorteile von CSS-Animationen

Es gibt drei nennenswerte Vorteile von CSS-Animationen im Vergleich zu Animationen über Skripte.

CSS-Animationen lassen sich leicht erstellen, ohne Vorwissen in der Programmierung (z.B. ohne JavaScript-Kenntnisse)
Die Animationen benötigen generell wenig Systemressourcen. Die Rendering-Engine kann z.B. über Frame-Skipping die Leistung deiner Animationen so flüssig wie möglich darstellen.
Dein Browser (Firefox, Chrome und Co.) kann die Leistung und Effizienz deiner Animationen optimieren. Beispielsweise wird die Framerate automatisch runtergesetzt, wenn du zu viele Tabs geöffnet hast.

Los geht's mit dem Tutorial:

Für dieses CSS-Animations-Tutorial benötigst du einen einfachen Texteditor und ein Standard-HTML-Template.

Speichere diese Datei mit einem beliebigen Namen und der Endung .html z.B. animation.html

HTML-Template (du kannst den folgenden Code einfach in deinen Texteditor kopieren & einfügen:

Jetzt Coden lernen

<!DOCTYPE html>
<head>
<title>Animation in CSS3</title>
<meta charset="utf-8">
</head>
<body>

</body>
</html>

Kostenloser Crashkurs für Anfänger

Jetzt kostenlosen Crashkurs sichern (Online Programmieren, keine Installation nötig)

1. Bilder mit CSS darstellen

Jetzt benötigen wir ein Bild, dass wir im Anschluss animieren werden. Ich benutze für dieses Beispiel unser CodeKiste-Roboter-Maskottchen "Nano". Wenn du Nano für deine eigene Animation benutzen möchtest, findest du hier die (etwas lange) URL zur Bilddatei:

https://lerneprogrammieren.de/wp-content/uploads/nano.png

Es kann losgehen:

Erstelle jetzt das <style> Tag im Head-Bereich und füge die Klasse .nano ein.
Um das Bild von Nano korrekt darzustellen, setzen wir die Höhe (height) und Breite (width) auf 200px.
Das Bild wird mit dem Befehl background: url ("hier kommt die URL rein") eingefügt. Zusätzlich dazu setzen wir noch die Eigenschaft no-repeat.

Hier ist der Code, um das Bild in CSS zu platzieren:

Jetzt Coden lernen

<!DOCTYPE html>
<head>
<title>Animation in CSS3</title>
<style>
    .nano {	
        width:200px;
        height:200px;
        background: url("https://lerneprogrammieren.de/wp-content/uploads/nano.png") no-repeat;
    }
</style>
</head>
<body>    

</body>
</html>

Wenn du deine Datei jetzt speicherst und sie dann in einem beliebigen Browser öffnest, dann siehst du ... nichts.

Hä? Wieso wird mir das Bild nicht angezeigt?

Ganz einfach. Wir müssen die CSS-Klasse .nano in unserem HTML-Code noch aufrufen.

Füge dafür den Code <div class="nano"></div> in das <body>-Tag ein.

Hier ist das Code-Beispiel:

Jetzt Coden lernen

<body>
 <div class="nano"></div>
</body>

Mit dem div-Element und class="nano" rufen wir unsere CSS-Klasse auf. Speichere deine Datei erneut ab und öffne sie in deinem Browser.

Du solltest jetzt das Bild von Nano sehen.

Bilder in CSS setzen — Super. Jetzt wird uns das Bild von Nano angezeigt!

2. Die Animation erstellen

Da die Position des Bildes derzeit statisch ist müssen wir diese in unserer CSS-Klasse .nano noch als "relativ" definieren. Dadurch lässt sich das Bild dann nach Lust und Laune auf deinem Bildschirm bewegen.

Füge diesen diesen Code in deine .nano-Klasse ein:

position: relative;

Jetzt fehlt nur noch die eigentliche Animation.

Die Voraussetzung dafür ist der Name der Animation und die Dauer (wie lange soll die Animation angezeigt werden?)

animation-name: nano_bewegen;

animation-duration: 3s;

Du kannst natürlich einen beliebigen Namen und eine beliebige Dauer für deine Animation verwenden. Im o.g. Beispiel wähle ich den Namen nano_bewegen und eine Anzeigedauer von 3 Sekunden.

Die zweite Voraussetzung sind die Keyframes. Hier definieren wir, wo unsere Animation anfängt und endet. Die Keyframes kommen ebenfalls zwischen die <style>-Tags im Header-Bereich.

Keyframes definierst du wie folgt:

@keyframes name-der-animation {

from {Eigenschaft: Wert;}

to {Eigenschaft: Wert;}

}

Nehmen wir an, dass unsere Figur am linken Bildschirmrand mit der Bewegung starten und in der Mitte des Bildschirms aufhören soll. Wir definieren die Keyframes wie folgt.

Code-Beispiel Keyframes:

Jetzt Coden lernen

@keyframes nano_bewegen { 
    from {left: 0;} 
    to {left: 50%;} 
}

Denk daran, dass dieser Code in das <style> Tag kommt. Wenn du die Datei jetzt speicherst und öffnest, sollte sich deine Figur vom linken Bildschirmrand in die Mitte des Bildschirms bewegen.

Das war einfach, oder?

Hier findest du die Komplettlösung des CSS-Animations-Tutorials:

Jetzt Coden lernen

<!DOCTYPE html>
<head>
<title>Animation in CSS3</title>
<style>
    .nano {	
        width:200px;
        height:200px;
        background: url("https://lerneprogrammieren.de/wp-content/uploads/nano.png") no-repeat;
        position: relative;
        animation-name: nano_bewegen;
        animation-duration: 3s;
    }
     
    @keyframes nano_bewegen {
        from {left: 0;}
        to {left: 50%;}
    }
</style>
</head>
<body>    
    <div class="nano"></div>
</body>
</html>

Fazit zum Tutorial

In diesem schnellen CSS-Tutorial hast du gelernt, wie du einfache CSS-Animationen erstellst. Dafür haben wir ein Bild in eine CSS-Klasse gesetzt und im Anschluss animiert. Für die Animation haben wir einen Animations-Namen und eine Animationsdauer benötigt.

Im Anschluss definieren wir die Keyframes für den Animations-Namen (z.B. nano_bewegen). In unserem Beispiel sollte sich die Figur von links bis hin zur Mitte des Bildschirms bewegen.

Neben einer einfachen Bewegung, kannst du Bilder, Texte und sämtliche Elemente nach deinen Wünschen animieren. Du kannst sie vergrößern, verkleinern, einblenden, ausblenden und vieles mehr. Am besten versuchst du gleich weitere Animationen, um dein neues Wissen zu festigen.

Wie wäre es, wenn du die Figur zuerst um 50% vergrößerst und sie dann bewegst? Ich bin gespannt auf deine Animationen ;-)

Programmierer-Crashkurs für Anfänger...kostenlos!

Baue echte Apps, ohne Vorwissen, ohne Installation!