CSS Keyframe-Animationen

Wir zeigen Ihnen wie Sie ganz leicht eine kleine Keyframes Animation auf Ihrer Website einbinden können.

Für Animationen muss nicht immer auf JavaScript zurückgegriffen werden. Bereits mit ein bisschen CSS-Code lassen sich tolle Animationen erstellen.

Die Keyframes Animation besteht aus einem Start- und Endpunkt (0 – 100%). Dazwischen können beliebig viele Zwischenpunkte definiert werden. In einer Keyframes-Animation können sämtliche CSS-Anweisungen verwendet werden.

Für die Anwendung muss das HTML-Element, welches animiert werden soll, durch eine Klasse gekennzeichnet werden. Im CSS wird diese Klasse dann angesprochen. Mit "animation" wird die Keyframes Animation definiert, welche den gleichen Namen haben muss, wie im Keyframe definiert. Zur bessern Übersicht untenstehend ein Beispiel mit einer Bild Animation:

.pacman {

animation: pacman 3s steps(24) infinite;

}

@keyframes pacman {

0% {

background-position: 0;

transform: translateX(-150px);

}

100% {

background-position: -2468px;

transform: translateX(800px);

}