✨ 1. Interaktive Animationen im Überblick
Bewege die Maus über die Demo-Elemente, um das Verhalten zu testen:
PULSIERENDER STATUS
Server Online
SCHWEBENDES ELEMENT
🚀 Floating Icon
HOVER-LIFT EFFEKT
Bewege mich! 👆
⚡ 2. Transitions vs. Animationen
Verwende Transitions für Nutzer-Reaktionen (Hover/Focus) und @keyframes Animationen für kontinuierliche Abläufe:
/* 🎯 1. Sanfter Hover-Übergang mit Hardware-Beschleunigung: */
.card {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
transform: translateY(-8px) scale(1.02);
box-shadow: 0 16px 32px rgba(0, 0, 0, 0.25);
}
/* 🎯 2. Endlos-Schleife mit Keyframes: */
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
}
.badge {
animation: float 4s infinite ease-in-out;
}🎬 Didaktische Analogie: Das Daumenkino
Transitions sind die automatische Zwischenbildberechnung des Browsers zwischen zwei Fotos. @keyframes sind das detaillierte Regiebuch, bei dem du genau vorschreibst, was bei 0%, 50% und 100% der Szene passiert.
♿ 3. Barrierefreiheit: prefers-reduced-motion
Professionelles CSS respektiert stets Systemeinstellungen von Nutzern, die Animationen reduzieren möchten:
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}🧠 Diagnostischer Selbst-Check
Überprüfe dein Verständnis der Kernkonzepte und typischen Denkfallen, bevor du den Code in der Web-IDE schreibst.