CSS – Animationen und Übergänge

1. Was sind CSS-Animationen?

Mit CSS können HTML-Elemente bewegt, gedreht, vergrößert oder farblich verändert werden.

Animationen können die Benutzeroberfläche verständlicher und ansprechender gestalten. Sie sollten jedoch sparsam eingesetzt werden.

2. transition – Weiche Übergänge

Mit transition können Änderungen von CSS-Eigenschaften weich dargestellt werden.

CSS-Code

.button {
    background-color: blue;
    transition: background-color 0.3s ease;
}

.button:hover {
    background-color: green;
}

Ergebnis

Bewegen Sie den Mauszeiger über die Schaltfläche. Die Hintergrundfarbe verändert sich weich.

3. Aufbau von transition

transition: property duration timing-function delay;

Beispiel

.box {
    transition: transform 0.5s ease 0.2s;
}

Die Transformation dauert 0,5 Sekunden und beginnt nach einer Verzögerung von 0,2 Sekunden.

4. transform – Elemente verändern

Mit transform können Elemente verschoben, gedreht, skaliert oder verzerrt werden.

5. scale() – Vergrößern und Verkleinern

CSS-Code

.box {
    transition: transform 0.3s ease;
}

.box:hover {
    transform: scale(1.15);
}

Ergebnis

Beim Überfahren mit der Maus wird die Box um 15 Prozent vergrößert.

6. rotate() – Drehen

CSS-Code

.box:hover {
    transform: rotate(15deg);
}

Ergebnis

deg steht für Grad. Positive Winkel drehen im üblichen Koordinatensystem im Uhrzeigersinn.

7. translate() – Verschieben

CSS-Code

.box:hover {
    transform: translateY(-15px);
}

Ergebnis

Ein negativer Wert bei translateY() verschiebt das Element nach oben.

8. @keyframes – Eigene Animationen

Mit @keyframes können mehrere Zustände einer Animation definiert werden.

CSS-Code

@keyframes bewegen {
    from {
        transform: translateX(-35px);
    }

    to {
        transform: translateX(35px);
    }
}

.box {
    animation: bewegen 2s ease-in-out
               infinite alternate;
}

Ergebnis

9. animation – Animation anwenden

Die Eigenschaft animation verbindet mehrere Animationseinstellungen in einer Kurzschreibweise.

.box {
    animation: bewegen 2s ease infinite alternate;
}

10. Animation mit Prozentangaben

Anstelle von from und to können Prozentwerte verwendet werden.

CSS-Code

@keyframes farbwechsel {
    0% {
        background-color: blue;
    }

    50% {
        background-color: green;
    }

    100% {
        background-color: purple;
    }
}

Ergebnis

11. Rotierende Animation

CSS-Code

@keyframes drehen {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.box {
    animation: drehen 3s linear infinite;
}

Ergebnis

12. Pulsierende Animation

Eine pulsierende Animation verändert wiederholt die Größe eines Elements.

CSS-Code

@keyframes pulsieren {
    0%, 100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.12);
    }
}

.box {
    animation: pulsieren 1.5s ease-in-out infinite;
}

Ergebnis

13. opacity – Ein- und Ausblenden

Mit opacity kann die Transparenz eines Elements verändert werden.

CSS-Code

@keyframes einblenden {
    from {
        opacity: 0.2;
    }

    to {
        opacity: 1;
    }
}

.box {
    animation: einblenden 2s
               ease-in-out infinite alternate;
}

Ergebnis

14. animation-timing-function

Die Timing-Funktion bestimmt den Geschwindigkeitsverlauf einer Animation.

CSS-Code

.box {
    animation-timing-function: ease-in-out;
}

15. animation-direction

Mit animation-direction wird festgelegt, in welcher Richtung eine Animation abläuft.

16. animation-iteration-count

Diese Eigenschaft bestimmt die Anzahl der Wiederholungen.

.box {
    animation-iteration-count: 3;
}

Mit infinite wird eine Animation unbegrenzt wiederholt.

.box {
    animation-iteration-count: infinite;
}

17. Hover-Effekt für Karten

Übergänge können eingesetzt werden, um Karten beim Überfahren mit der Maus hervorzuheben.

CSS-Code

.karte {
    transition: transform 0.3s ease,
                box-shadow 0.3s ease;
}

.karte:hover {
    transform: translateY(-7px);
    box-shadow: 0 12px 25px
                rgba(0, 0, 0, 0.15);
}

Ergebnis

18. Ladeanimation – Loading Spinner

Eine Ladeanimation kann anzeigen, dass eine Anwendung gerade Daten verarbeitet.

CSS-Code

@keyframes drehen {
    to {
        transform: rotate(360deg);
    }
}

.loader {
    width: 65px;
    height: 65px;
    border: 7px solid lightblue;
    border-top-color: blue;
    border-radius: 50%;
    animation: drehen 1s linear infinite;
}

Ergebnis

19. Interaktives Beispiel: Animation steuern

Mit JavaScript kann die Wiedergabe einer CSS-Animation beeinflusst werden.

JavaScript-Code

function pauseAnimation() {
    const box = document.getElementById("box");
    box.style.animationPlayState = "paused";
}

20. Fortschrittsanzeige

Eine animierte Fortschrittsleiste kann den Verlauf eines Vorgangs veranschaulichen.

CSS-Code

@keyframes fortschritt {
    from {
        width: 0;
    }

    to {
        width: 100%;
    }
}

.balken {
    animation: fortschritt 4s linear infinite;
}

Ergebnis

21. Barrierefreiheit bei Animationen

Manche Menschen reagieren empfindlich auf starke Bewegungen und Animationen.

Mit prefers-reduced-motion können entsprechende Systemeinstellungen berücksichtigt werden.

CSS-Code

@media (prefers-reduced-motion: reduce) {
    .animation {
        animation: none;
        transition: none;
    }
}

Die Beispiele auf dieser Seite berücksichtigen diese Einstellung.

22. Praktische Übungen

transition

.button {
    background: blue;
    transition: background-color 0.5s;
}

.button:hover {
    background: green;
}

.box:hover {
    transform: scale(1.2);
}

.box {
    transform: rotate(45deg);
}

.box {
    transform: translateX(20px);
}

@keyframes bewegen {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(100px);
    }
}

.box {
    animation-iteration-count: infinite;
}

animation-direction: alternate;

animation-play-state: paused;

@media (prefers-reduced-motion: reduce) {
    .box {
        animation: none;
    }
}

23. Zusammenfassung

Mit transition werden CSS-Eigenschaften weich verändert. Mit transform können Elemente verschoben, gedreht oder skaliert werden.

Mit @keyframes werden Animationsabläufe definiert. Die Eigenschaft animation bestimmt unter anderem Dauer, Geschwindigkeit und Wiederholungen.

Animationen sollten die Bedienbarkeit unterstützen und Einstellungen zur Reduzierung von Bewegungen berücksichtigen.