CSS Transitions & Animations

Bewegung macht deine Webseite lebendig! Lerne, wie du smooth Übergänge und komplexe Animationen erstellst.

Transitions vs. Animations

Zwei Wege für Bewegung:

Transitions	Animations
Einfach	Komplex
A → B	Mehrere Schritte
Braucht Trigger (hover, click)	Läuft automatisch
Perfekt für Hover-Effekte	Perfekt für komplexe Bewegungen

CSS Transitions - Von A nach B

Transitions machen Änderungen smooth statt abrupt.

transition - Die Basis

Einfachste Transition

.button {
    background-color: blue;
    transition: background-color 0.3s;
    /*          Property        Duration */
}

.button:hover {
    background-color: green;
    /* Wechsel von blau zu grün in 0.3 Sekunden! */
}

Ohne Transition: Sofortiger Wechsel (abrupt) Mit Transition: Smooth Übergang in 0.3s

transition-property - Was soll animiert werden?

transition-property

/* Nur eine Property */
.box {
    transition-property: background-color;
}

/* Mehrere Properties */
.box {
    transition-property: background-color, transform, opacity;
}

/* Alle Properties (vorsichtig nutzen!) */
.box {
    transition-property: all;
}

Animierbare Properties:

✅ background-color, color
✅ width, height
✅ opacity
✅ transform (rotate, scale, translate)
✅ margin, padding
✅ border-color, border-width
❌ display (nicht animierbar!)
❌ font-family (nicht animierbar!)

transition-duration - Wie lange?

transition-duration

/* In Sekunden */
.fast {
    transition-duration: 0.2s;  /* 200ms */
}

.medium {
    transition-duration: 0.5s;  /* 500ms */
}

.slow {
    transition-duration: 1s;    /* 1 Sekunde */
}

/* In Millisekunden */
.very-fast {
    transition-duration: 100ms;
}

Empfohlene Werte:

Sehr schnell: 0.1s - 0.2s (Micro-Interactions)
Mittel: 0.3s - 0.5s (Hover-Effekte) ⭐ Standard
Langsam: 0.6s - 1s (Große Bewegungen)

transition-timing-function - Wie bewegt es sich?

Die Beschleunigungskurve:

timing-function

/* Linear (konstante Geschwindigkeit) */
.linear {
    transition-timing-function: linear;
}

/* ease (Standard - langsam, schnell, langsam) */
.ease {
    transition-timing-function: ease;
}

/* ease-in (langsam starten) */
.ease-in {
    transition-timing-function: ease-in;
}

/* ease-out (langsam enden) */
.ease-out {
    transition-timing-function: ease-out;
}

/* ease-in-out (langsam starten & enden) */
.ease-in-out {
    transition-timing-function: ease-in-out;
}

Wann welches?

ease-out - Natürlich, empfohlen für meiste Fälle ⭐
ease-in-out - Smooth und elegant
linear - Für Rotationen oder Loops
ease-in - Selten (fühlt sich langsam an)

Custom mit cubic-bezier:

cubic-bezier

/* Eigene Kurve erstellen */
.custom {
    transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    /* Bounce-Effekt! */
}

/* Tool: cubic-bezier.com zum Erstellen */

transition-delay - Verzögerung

Start verzögern:

transition-delay

.box {
    transition-delay: 0.2s;  /* Startet nach 0.2s */
}

/* Nützlich für sequenzielle Animationen */
.item-1 {
    transition-delay: 0s;
}

.item-2 {
    transition-delay: 0.1s;
}

.item-3 {
    transition-delay: 0.2s;
}

transition - Kurzschreibweise

Alles in einer Zeile:

transition Shorthand

/* property duration timing-function delay */
.box {
    transition: background-color 0.3s ease-out 0s;
}

/* Häufigste Form */
.box {
    transition: all 0.3s ease-out;
}

/* Mehrere Transitions */
.box {
    transition:
        background-color 0.3s ease-out,
        transform 0.3s ease-out,
        opacity 0.3s ease-out;
}

/* Oder kürzer */
.box {
    transition: all 0.3s ease-out;
}

Praktische Transition-Beispiele

Beispiel 1: Hover Button

Smooth Button

.button {
    padding: 12px 24px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease-out;
}

.button:hover {
    background-color: #0056b3;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
}

.button:active {
    transform: translateY(0);
}

Beispiel 2: Card Hover

Card mit Hover

.card {
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
}

.card:hover {
    transform: translateY(-8px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.card img {
    transition: transform 0.3s ease-out;
}

.card:hover img {
    transform: scale(1.05);
}

Beispiel 3: Link Underline

Animated Underline

.link {
    position: relative;
    color: #007bff;
    text-decoration: none;
}

.link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: #007bff;
    transition: width 0.3s ease-out;
}

.link:hover::after {
    width: 100%;
}

Beispiel 4: Smooth Color Change

Background Fade

.box {
    background-color: white;
    color: black;
    transition: background-color 0.3s, color 0.3s;
}

.box:hover {
    background-color: black;
    color: white;
}

CSS Animations - Komplexe Bewegungen

Animations ermöglichen mehrere Schritte und automatische Wiedergabe.

@keyframes - Definiere die Animation

@keyframes Basics

/* Animation definieren */
@keyframes fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Oder mit Prozenten */
@keyframes slide-in {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(0);
    }
}

animation - Animation anwenden

animation Property

.element {
    animation-name: fade-in;
    animation-duration: 1s;
    animation-timing-function: ease-out;
    animation-delay: 0s;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: forwards;
}

/* Oder Kurzschreibweise */
.element {
    animation: fade-in 1s ease-out 0s 1 normal forwards;
    /*         name   dur timing del count dir  fill */
}

animation-iteration-count - Wie oft?

Wiederholungen

/* Einmal */
.once {
    animation: fade-in 1s;
    animation-iteration-count: 1;  /* Standard */
}

/* 3x */
.three-times {
    animation: pulse 0.5s;
    animation-iteration-count: 3;
}

/* Unendlich */
.infinite {
    animation: rotate 2s linear infinite;
    /* Dreht sich für immer */
}

animation-direction - Richtung

Animation-Richtung

/* normal (vorwärts) */
.normal {
    animation-direction: normal;  /* 0% → 100% */
}

/* reverse (rückwärts) */
.reverse {
    animation-direction: reverse;  /* 100% → 0% */
}

/* alternate (hin und her) */
.alternate {
    animation: pulse 1s ease-in-out infinite alternate;
    animation-direction: alternate;  /* 0%→100%→0%→100% */
}

/* alternate-reverse */
.alternate-reverse {
    animation-direction: alternate-reverse;  /* 100%→0%→100%→0% */
}

animation-fill-mode - Was passiert vorher/nachher?

fill-mode

/* none (Standard) */
.none {
    animation-fill-mode: none;
    /* Element behält Original-Styles */
}

/* forwards (bleibt am Ende) */
.forwards {
    animation: fade-in 1s forwards;
    /* Bleibt bei 100% (opacity: 1) */
}

/* backwards (startet sofort mit 0%-Styles) */
.backwards {
    animation: fade-in 1s backwards;
    /* Hat sofort opacity: 0 */
}

/* both (forwards + backwards) */
.both {
    animation: fade-in 1s both;
}

Meist nutzt man forwards!

Komplexe Keyframe-Animationen

Mehrere Schritte

Multi-Step Animation

@keyframes bounce {
    0% {
        transform: translateY(0);
    }
    25% {
        transform: translateY(-20px);
    }
    50% {
        transform: translateY(0);
    }
    75% {
        transform: translateY(-10px);
    }
    100% {
        transform: translateY(0);
    }
}

.bouncing {
    animation: bounce 1s ease-in-out;
}

Mehrere Properties

Mehrere Properties animieren

@keyframes slide-and-fade {
    0% {
        transform: translateX(-100%);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

.element {
    animation: slide-and-fade 0.5s ease-out forwards;
}

Beliebte Animations

1. Fade In

Fade In

@keyframes fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.fade-in {
    animation: fade-in 0.5s ease-out;
}

2. Slide In

Slide In

@keyframes slide-in-left {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.slide-in {
    animation: slide-in-left 0.5s ease-out;
}

3. Pulse

Pulse Effect

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

.pulse {
    animation: pulse 1s ease-in-out infinite;
}

4. Rotate (Loading Spinner)

Rotating Spinner

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

.spinner {
    width: 50px;
    height: 50px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #007bff;
    border-radius: 50%;
    animation: rotate 1s linear infinite;
}

5. Shake

Shake Animation

@keyframes shake {
    0%, 100% {
        transform: translateX(0);
    }
    10%, 30%, 50%, 70%, 90% {
        transform: translateX(-10px);
    }
    20%, 40%, 60%, 80% {
        transform: translateX(10px);
    }
}

.shake {
    animation: shake 0.5s ease-in-out;
}

6. Bounce In

Bounce In

@keyframes bounce-in {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    50% {
        transform: scale(1.1);
    }
    70% {
        transform: scale(0.9);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.bounce-in {
    animation: bounce-in 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

Animation on Scroll (mit JavaScript)

Scroll Animation

/* CSS */
.fade-in-on-scroll {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}

/* JavaScript */
const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            entry.target.classList.add('visible');
        }
    });
});

document.querySelectorAll('.fade-in-on-scroll').forEach(el => {
    observer.observe(el);
});

Performance-Tipps

✅ Performant animieren:

Performante Properties

/* GUT - GPU-beschleunigt */
.fast {
    transition: transform 0.3s, opacity 0.3s;
}

.fast:hover {
    transform: translateX(10px) scale(1.1) rotate(5deg);
    opacity: 0.8;
}

Performante Properties:

✅ transform (translate, scale, rotate)
✅ opacity

❌ Langsam:

Langsame Properties

/* LANGSAM - kein GPU */
.slow {
    transition: width 0.3s, height 0.3s, top 0.3s, left 0.3s;
}

/* BESSER: transform nutzen */
.fast {
    transition: transform 0.3s;
}

.fast:hover {
    transform: scale(1.2);  /* Statt width/height ändern */
}

Langsame Properties:

❌ width, height
❌ top, left, right, bottom
❌ margin, padding

Nutze stattdessen transform!

Best Practices

✅ DO:

Subtile Animationen (nicht zu viel Bewegung!)
Kurze Durationen (0.2s - 0.5s für meiste Fälle)
ease-out für natürliche Bewegungen
transform + opacity für Performance
Transitions für Interaktionen (hover, focus)
Animations für automatische Bewegungen
prefers-reduced-motion respektieren

❌ DON'T:

Nicht zu lange Animationen (> 1s)
Nicht zu viele gleichzeitig
Nicht width/height animieren (Performance!)
Nicht all bei vielen Properties (Performance!)
Nicht ohne Accessibility (reduced-motion)

Accessibility - prefers-reduced-motion

Respektiere Nutzer-Einstellungen:

Reduced Motion

/* Standard: Mit Animation */
.element {
    animation: slide-in 0.5s ease-out;
}

/* Nutzer will weniger Bewegung */
@media (prefers-reduced-motion: reduce) {
    .element {
        animation: none;
        /* Oder viel subtiler */
        animation-duration: 0.01s;
    }
}

/* Moderne Lösung */
@media (prefers-reduced-motion: no-preference) {
    .element {
        animation: slide-in 0.5s ease-out;
    }
}

📝 Quiz

Was ist der Unterschied zwischen Transitions und Animations?

Kein UnterschiedTransitions brauchen einen Trigger (hover), Animations laufen automatischAnimations sind schnellerTransitions sind moderner

📝 Quiz

Welche Properties sollte man für beste Performance animieren?

width und heightmargin und paddingtransform und opacitytop und left

⚡

Tipps & Tricks

will-change für Performance

Optimiere Animationen mit will-change:

.animated-element {
    will-change: transform, opacity;
}

.animated-element:hover {
    transform: scale(1.1);
    opacity: 0.9;
}

/* Entferne will-change nach Animation! */
.animated-element.done {
    will-change: auto;
}

Vorsicht: Nicht überall nutzen, nur für Elemente die wirklich animiert werden!

Animation Delays für Sequenzen

Erstelle elegante gestaffelte Animationen:

.item {
    animation: fade-in 0.5s ease-out;
}

.item:nth-child(1) { animation-delay: 0s; }
.item:nth-child(2) { animation-delay: 0.1s; }
.item:nth-child(3) { animation-delay: 0.2s; }

/* Oder mit calc() */
.item {
    animation-delay: calc(var(--index) * 0.1s);
}

prefers-reduced-motion respektieren

Accessibility für Motion-Sensitive Users:

/* Standard mit Animation */
.card {
    transition: transform 0.3s ease-out;
}

/* Reduziert für Motion-Sensitive */
@media (prefers-reduced-motion: reduce) {
    .card {
        transition: none;
    }

    * {
        animation-duration: 0.01s !important;
        animation-iteration-count: 1 !important;
    }
}

Cubic-Bezier für natürliche Bewegungen

Nutze custom easing für besseres Feeling:

.button {
    /* Standard ease-out */
    transition: transform 0.3s ease-out;

    /* Oder custom für Bounce-Effekt */
    transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Beliebte Custom Curves */
:root {
    --easing-smooth: cubic-bezier(0.4, 0.0, 0.2, 1);
    --easing-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    --easing-sharp: cubic-bezier(0.4, 0.0, 0.6, 1);
}

Tool: cubic-bezier.com zum Experimentieren!

Übungsaufgaben

Aufgabe 1: Button Hover

Erstelle einen Button mit:

Smooth background-color Transition
Leicht nach oben (translateY)
Box-shadow beim Hover
0.3s Duration

Aufgabe 2: Loading Spinner

Erstelle einen Loading-Spinner:

Rotiert unendlich
Linear timing-function
Border-Trick für Stil

Aufgabe 3: Card Animation

Erstelle eine Card mit:

Fade-in beim Laden
Scale + translateY beim Hover
Smooth Transitions

Nächste Schritte

Du kennst jetzt:

✅ CSS Transitions (property, duration, timing-function, delay)
✅ CSS Animations (@keyframes, animation)
✅ Timing-Functions & cubic-bezier
✅ Performance (transform + opacity)
✅ Accessibility (reduced-motion)
✅ Beliebte Animations

Als Nächstes lernst du:

CSS Transforms (rotate, scale, translate im Detail)
Media Queries (Responsive Design)
CSS Variables (Custom Properties)

Advanced Animations:

✨ SCSS Animations - Animation Libraries mit SCSS
🌙 SCSS Dark Mode - Theme Transitions

Weiter so! 🚀

CSS Transitions & Animations - Bewegung ins Design bringen

CSS Transitions & Animations

Transitions vs. Animations

CSS Transitions - Von A nach B

transition - Die Basis

transition-property - Was soll animiert werden?

transition-duration - Wie lange?

transition-timing-function - Wie bewegt es sich?

transition-delay - Verzögerung

transition - Kurzschreibweise

Praktische Transition-Beispiele

Beispiel 1: Hover Button

Beispiel 2: Card Hover

Beispiel 3: Link Underline

Beispiel 4: Smooth Color Change

CSS Animations - Komplexe Bewegungen

@keyframes - Definiere die Animation

animation - Animation anwenden

animation-iteration-count - Wie oft?

animation-direction - Richtung

animation-fill-mode - Was passiert vorher/nachher?

Komplexe Keyframe-Animationen

Mehrere Schritte

Mehrere Properties

Beliebte Animations

1. Fade In

2. Slide In

3. Pulse

4. Rotate (Loading Spinner)

5. Shake

6. Bounce In

Animation on Scroll (mit JavaScript)

Performance-Tipps

✅ Performant animieren:

❌ Langsam:

Best Practices

✅ DO:

❌ DON'T:

Accessibility - prefers-reduced-motion

📝 Quiz

📝 Quiz

Tipps & Tricks

will-change für Performance

Animation Delays für Sequenzen

prefers-reduced-motion respektieren

Cubic-Bezier für natürliche Bewegungen

Übungsaufgaben

Nächste Schritte

Gut gemacht! 🎉

Artikel bewerten

Das könnte dich auch interessieren

CSS Pseudo-Classes - :hover, :focus, :nth-child & mehr

CSS Backgrounds & Borders - Hintergründe & Rahmen stylen

CSS Basics - Deine Seite gestalten