CSS Animationen und Transitions

CSS ermöglicht flüssige Animationen ohne JavaScript. Lernen Sie Transitions für einfache Übergänge und Keyframe-Animationen für komplexe Effekte.

Transitions vs. Animations

Transitions - Grundlagen

.button {
    background: blue;
    color: white;
    padding: 10px 20px;

    /* Transition definieren */
    transition: background 0.3s ease;
}

.button:hover {
    background: darkblue;
}

/* Mehrere Properties */
.card {
    transition: transform 0.3s ease,
                box-shadow 0.3s ease,
                opacity 0.3s ease;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

/* Alle Properties */
.element {
    transition: all 0.3s ease;
    /* ⚠️ Performance: Besser spezifische Properties angeben */
}

Transition-Syntax

/* Einzelne Properties */
transition-property: transform;
transition-duration: 0.3s;
transition-timing-function: ease;
transition-delay: 0.1s;

/* Kurzform */
transition: property duration timing-function delay;
transition: transform 0.3s ease 0.1s;

/* Timing Functions */
transition: all 0.3s ease;        /* Standard, langsam→schnell→langsam */
transition: all 0.3s linear;      /* Konstante Geschwindigkeit */
transition: all 0.3s ease-in;     /* Langsam starten */
transition: all 0.3s ease-out;    /* Langsam enden */
transition: all 0.3s ease-in-out; /* Beides */

/* Cubic Bezier für eigene Kurven */
transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
/* "Back" Effekt - überschwingt leicht */

/* Mehrere Transitions */
transition: transform 0.3s ease,
            opacity 0.5s ease 0.1s;

Keyframe Animationen

/* Animation definieren */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Mit Prozent für mehr Kontrolle */
@keyframes bounce {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-20px);
    }
    100% {
        transform: translateY(0);
    }
}

/* Komplexe Animation */
@keyframes slideInBounce {
    0% {
        transform: translateX(-100%);
        opacity: 0;
    }
    60% {
        transform: translateX(10%);
        opacity: 1;
    }
    80% {
        transform: translateX(-5%);
    }
    100% {
        transform: translateX(0);
    }
}

/* Animation anwenden */
.element {
    animation: fadeIn 0.5s ease forwards;
}

.bouncing {
    animation: bounce 1s ease infinite;
}

Animation-Properties

/* Einzelne Properties */
animation-name: fadeIn;
animation-duration: 0.5s;
animation-timing-function: ease;
animation-delay: 0.2s;
animation-iteration-count: 1;        /* Anzahl oder 'infinite' */
animation-direction: normal;         /* normal, reverse, alternate */
animation-fill-mode: forwards;       /* none, forwards, backwards, both */
animation-play-state: running;       /* running, paused */

/* Kurzform */
animation: name duration timing-function delay iteration-count direction fill-mode;
animation: fadeIn 0.5s ease 0.2s 1 normal forwards;

/* Mehrere Animationen */
animation: fadeIn 0.5s ease,
           slideIn 0.5s ease 0.2s;

Transform-Funktionen

/* Translate - Verschieben */
transform: translateX(20px);
transform: translateY(-10px);
transform: translate(20px, -10px);
transform: translateZ(50px);         /* 3D */
transform: translate3d(20px, 10px, 50px);

/* Scale - Skalieren */
transform: scale(1.5);               /* Beide Achsen */
transform: scaleX(2);
transform: scaleY(0.5);
transform: scale(1.5, 0.8);

/* Rotate - Drehen */
transform: rotate(45deg);
transform: rotateX(45deg);           /* 3D */
transform: rotateY(45deg);
transform: rotateZ(45deg);
transform: rotate3d(1, 1, 0, 45deg);

/* Skew - Verzerren */
transform: skewX(20deg);
transform: skewY(10deg);
transform: skew(20deg, 10deg);

/* Kombinieren */
transform: translateX(20px) rotate(45deg) scale(1.2);
/* ⚠️ Reihenfolge wichtig! */

/* Transform Origin */
transform-origin: center;            /* Standard */
transform-origin: top left;
transform-origin: 50% 100%;

Praktische Beispiele

/* Hover-Button mit mehreren Effekten */
.fancy-button {
    padding: 15px 30px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.2s ease,
                box-shadow 0.2s ease;
}

.fancy-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(102, 126, 234, 0.4);
}

.fancy-button:active {
    transform: translateY(-1px);
    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
}

/* Loading Spinner */
@keyframes spin {
    to { transform: rotate(360deg); }
}

.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* Pulse Effekt */
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.pulse {
    animation: pulse 2s ease infinite;
}

/* Shake Effekt (für Fehler) */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}

.error-shake {
    animation: shake 0.5s ease;
}

/* Fade In Up (für Scroll-Animationen) */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-on-scroll {
    animation: fadeInUp 0.6s ease forwards;
}

Performance-Optimierung

/* ✅ GPU-beschleunigte Properties (performant) */
transform: translateX(100px);
transform: scale(1.5);
transform: rotate(45deg);
opacity: 0.5;

/* ❌ Löst Layout/Paint aus (langsam) */
width: 200px;
height: 100px;
top: 50px;
left: 100px;
margin: 20px;
padding: 10px;
border-width: 2px;

/* ✅ will-change für Voraboptimierung */
.animated-element {
    will-change: transform, opacity;
}

/* ⚠️ will-change sparsam einsetzen! */
/* Nach Animation entfernen */

/* ✅ contain für Isolierung */
.animation-container {
    contain: layout style paint;
}

/* ✅ Hardware-Beschleunigung erzwingen */
.gpu-accelerated {
    transform: translateZ(0);
    /* oder */
    backface-visibility: hidden;
}

Animation mit JavaScript steuern

/* CSS */
.element {
    animation: slideIn 0.5s ease forwards;
    animation-play-state: paused;
}

.element.playing {
    animation-play-state: running;
}

// JavaScript
const element = document.querySelector('.element');

// Animation starten
element.classList.add('playing');

// Animation-Ende erkennen
element.addEventListener('animationend', (e) => {
    console.log('Animation beendet:', e.animationName);
});

// Transition-Ende erkennen
element.addEventListener('transitionend', (e) => {
    console.log('Transition beendet:', e.propertyName);
});

// Animation neu starten
function restartAnimation(el) {
    el.style.animation = 'none';
    el.offsetHeight; // Reflow triggern
    el.style.animation = null;
}

Reduced Motion berücksichtigen

/* Animationen für Nutzer mit Bewegungsempfindlichkeit reduzieren */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Oder gezielt */
@media (prefers-reduced-motion: reduce) {
    .animated-element {
        animation: none;
        transition: none;
    }
}

Weitere Informationen

• 🎨 CSS Flexbox
• 📱 Responsive Design
• ⚡ Web Performance