Kostenlose Tutorials für Anfänger

Appearance

Kapitel 21: Animationen** ​

🎬 Lernziel: Meistern Sie CSS-Animationen, um komplexe dynamische Effekte mit Keyframes zu erstellen.

21.1 Definition von Animationen ​

💡 Was sind CSS-Animationen? ​

CSS-Animationen ermöglichen es, Elemente über Keyframes zu animieren. Eine Animation besteht aus zwei Teilen:

  1. @keyframes - Definiert die Animationsschritte (von → bis)
  2. Animations-Eigenschaften - Steuert, wie die Animation abläuft

🎯 Grundlegende Struktur ​

css
/* 1. Definieren der Keyframes */
@keyframes mein-animation {
    from {
        /* Startzustand */
    }
    to {
        /* Endzustand */
    }
}

/* 2. Animations-Eigenschaften anwenden */
.element {
    animation-name: mein-animation;
    animation-duration: 2s;
}

21.2 Keyframes (@keyframes) ​

💡 Was sind Keyframes? ​

Keyframes definieren den Startzustand, den Endzustand und die Zwischenzustände einer Animation.

🎯 Syntax von @keyframes ​

css
/* Methode 1: from → to */
@keyframes farbwechsel {
    from {
        background-color: rot;
    }
    to {
        background-color: blau;
    }
}

/* Methode 2: Prozentangabe (0% → 100%) */
@keyframes farbwechsel {
    0% {
        background-color: rot;
    }
    50% {
        background-color: gelb;
    }
    100% {
        background-color: blau;
    }
}

📝 Beispiel 1: Einfache Animation (Farbe von rot zu blau) ​

html
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>Einfache Animation</title>
    <style>
        /* Definieren der Keyframes */
        @keyframes farbwechsel {
            from {
                background-color: red;
            }
            to {
                background-color: blue;
            }
        }
        
        /* Animations-Eigenschaften anwenden */
        .animiert-box {
            width: 100px;
            height: 100px;
            background-color: red;
            animation-name: farbwechsel;
            animation-duration: 2s;
        }
    </style>
</head>
<body>
    <div class="animiert-box"></div>
</body>
</html>

Erklärung:

  • @keyframes farbwechsel - Definiert eine Animation namens "farbwechsel"
  • from - Startzustand (0%)
  • to - Endzustand (100%)
  • animation-name: farbwechsel - Wendet die Animation auf das Element an
  • animation-duration: 2s - Die Animation dauert 2 Sekunden

21.3 Animations-Eigenschaften ​

🎯 Wichtige Animations-Eigenschaften ​

css
.element {
    /* Name der Animation */
    animation-name: mein-animation;
    
    /* Dauer der Animation */
    animation-duration: 2s;
    
    /* Anzahl der Wiederholungen (unendlich: infinite) */
    animation-iteration-count: 3;
    
    /* Verzögerung vor Animationsbeginn */
    animation-delay: 0.5s;
    
    /* Geschwindigkeitskurve */
    animation-timing-function: ease;
    
    /* Richtung der Animation */
    animation-direction: normal; /* oder: reverse, alternate */
    
    /* Verhalten nach Ende der Animation */
    animation-fill-mode: forwards; /* Bleibt im Endzustand */
}

📝 Beispiel 2: Animation mit mehreren Eigenschaften ​

html
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>Animation mit mehreren Eigenschaften</title>
    <style>
        @keyframes bewegen {
            0% {
                transform: translateX(0px);
            }
            100% {
                transform: translateX(200px);
            }
        }
        
        .animiert-box {
            width: 100px;
            height: 100px;
            background-color: red;
            animation-name: bewegen;
            animation-duration: 2s;
            animation-iteration-count: infinite; /* Unendlich wiederholen */
            animation-direction: alternate; /* Hin und zurück */
        }
    </style>
</head>
<body>
    <div class="animiert-box"></div>
</body>
</html>

Erklärung:

  • animation-iteration-count: infinite - Die Animation wiederholt sich unendlich oft
  • animation-direction: alternate - Die Animation läuft abwechselnd vorwärts und rückwärts

21.4 Häufige Animationseffekte ​

🎯 Effekt 1: Drehen ​

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

.drehendes-element {
    animation: drehen 2s infinite linear;
}

🎯 Effekt 2: Verschieben ​

css
@keyframes verschieben {
    0% {
        transform: translateX(0px);
    }
    100% {
        transform: translateX(200px);
    }
}

.verschiebendes-element {
    animation: verschieben 2s ease;
}

🎯 Effekt 3: Skalieren ​

css
@keyframes skalieren {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.5);
    }
    100% {
        transform: scale(1);
    }
}

.skalierendes-element {
    animation: skalieren 2s ease;
}

🎯 Effekt 4: Einblenden ​

css
@keyframes einblenden {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.einblendendes-element {
    animation: einblenden 2s ease;
}

21.5 Neueinsteiger-Vereinfachung: Häufige Animationsvorlagen ​

🎨 Vorlage 1: Pulsierende Schaltfläche ​

css
@keyframes pulsieren {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

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

🎨 Vorlage 2: Hüpfende Ladung ​

css
@keyframes hüpfen {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-20px);
    }
}

.hüpfendes-element {
    animation: hüpfen 1s infinite ease-in-out;
}

🎨 Vorlage 3: Gleitender Text ​

css
@keyframes gleiten {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

.gleitender-text {
    animation: gleiten 5s infinite linear;
}

21.6 Praxis: Drehende Icons, einblendende Tooltips, Scroll-Animationen ​

🎨 Praxis 1: Drehendes Icon ​

html
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>Drehendes Icon</title>
    <style>
        @keyframes drehen {
            from {
                transform: rotate(0deg);
            }
            to {
                transform: rotate(360deg);
            }
        }
        
        .drehendes-icon {
            width: 50px;
            height: 50px;
            background-color: #4CAF50;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
            animation: drehen 2s infinite linear;
        }
    </style>
</head>
<body>
    <div class="drehendes-icon">↻</div>
</body>
</html>

🎨 Praxis 2: Einblendender Tooltip ​

html
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>Einblendender Tooltip</title>
    <style>
        @keyframes tooltip-einblenden {
            0% {
                opacity: 0;
                transform: translateY(10px);
            }
            100% {
                opacity: 1;
                transform: translateY(0px);
            }
        }
        
        .tooltip {
            position: relative;
            display: inline-block;
        }
        
        .tooltip .tooltip-text {
            visibility: hidden;
            width: 120px;
            background-color: black;
            color: white;
            text-align: center;
            padding: 5px;
            border-radius: 4px;
            position: absolute;
            z-index: 1;
            bottom: 125%;
            left: 50%;
            margin-left: -60px;
        }
        
        .tooltip:hover .tooltip-text {
            visibility: visible;
            animation: tooltip-einblenden 0.3s ease;
        }
    </style>
</head>
<body>
    <div class="tooltip">
        Maus hier rüberbewegen
        <span class="tooltip-text">Tooltip-Text!</span>
    </div>
</body>
</html>

🎨 Praxis 3: Scroll-Animation (Elemente erscheinen beim Scrollen) ​

css
@keyframes scroll-einblenden {
    0% {
        opacity: 0;
        transform: translateY(50px);
    }
    100% {
        opacity: 1;
        transform: translateY(0px);
    }
}

.scroll-element {
    opacity: 0;
}

.scroll-element.sichtbar {
    animation: scroll-einblenden 0.5s ease forwards;
}

✅ Zusammenfassung ​

In diesem Kapitel haben Sie gelernt:

  1. ✅ Definition von Animationen - Kombination aus @keyframes und Animations-Eigenschaften
  2. ✅ Keyframes - Definieren von Start-, Zwischen- und Endzuständen
  3. ✅ Animations-Eigenschaften - Steuern von Dauer, Wiederholungen, Verzögerung
  4. ✅ Häufige Effekte - Drehen, Verschieben, Skalieren, Einblenden
  5. ✅ Praxis - Drehende Icons, Tooltips, Scroll-Animationen

🎯 Übung ​

Übung 1: Erstellen Sie eine Animation, die ein Element von links nach rechts bewegt.

Übung 2: Erstellen Sie eine Animation, die ein Element pulsieren lässt.

Übung 3: Erstellen Sie eine Animation, die ein Element einblendet.

📚 Nächstes Kapitel ​

Im nächsten Kapitel lernen wir Schatten und Filter (box-shadow, text-shadow, filter), um Elemente dreidimensionaler und hochwertiger wirken zu lassen.

[Weiter zu Kapitel 22: Schatten & Filter →]

Frei für alle Anfänger

Copyright © 2026 Programmier-Tutorials