CSS-Animationen und -Transitions verwandeln statische Webseiten in dynamische, interaktive Erlebnisse – ganz ohne JavaScript. Sie ermöglichen fließende, visuell ansprechende Effekte, die Interaktionen lebendiger wirken lassen und Designs zum Leben erwecken.
In diesem Leitfaden gehen wir über die Grundlagen hinaus und zeigen fortgeschrittene Techniken, erklären die wichtigsten Konzepte und geben praxisnahe Beispiele, mit denen du komplexe Animationen in dein Webprojekt integrieren kannst.
Transitions ermöglichen es, den Übergang von einem Stilzustand zum nächsten sanft und kontrolliert zu animieren. Statt abrupter Veränderungen werden Stiländerungen über eine festgelegte Dauer fließend dargestellt – das sorgt für natürlichere Interaktionen und eine bessere User Experience.
Grundsyntax:
.element {
transition: property duration timing-function delay;
}
Beispiel:
.button {
background-color: #3498db;
transition: background-color 0.5s ease-in-out;
}
.button:hover {
background-color: #2980b9;
}
Erklärung:
Beim Hover wird die Hintergrundfarbe des Buttons über 0,5 Sekunden sanft von Hell- zu Dunkelblau geändert. Die Funktion ease-in-out sorgt dabei für einen weichen Start- und Endpunkt.
Mehrere CSS-Eigenschaften können gleichzeitig animiert werden, indem sie durch Kommas getrennt angegeben werden. So lassen sich komplexe, abgestimmte Effekte in einem einzigen Übergang erzeugen.
Beispiel:
.card {
background-color: #fff;
transform: translateY(0);
box-shadow: none;
transition: background-color 0.4s ease, transform 0.4s ease, box-shadow 0.4s ease;
}
.card:hover {
background-color: #f7f7f7;
transform: translateY(-5px);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}
Erklärung:
Beim Hover ändern sich Hintergrundfarbe, Position und Schatten gleichzeitig über 0,4 Sekunden – ein harmonischer Effekt, der Tiefe und Interaktivität schafft.
Neben Standardfunktionen wie ease, linear oder ease-in-out kannst du mit cubic-bezier() individuelle Beschleunigungskurven definieren. So hast du volle Kontrolle über den Animationsverlauf.
Beispiel:
.panel {
transition: height 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
Erklärung:
Diese Funktion erzeugt einen “Overshoot”-Effekt – das Element bewegt sich kurz über die Zielposition hinaus, bevor es sich einpendelt. Perfekt für lebendige, verspielte Animationen.
Mit CSS-Animationen kannst du Bewegungsabläufe über sogenannte Keyframes steuern. Dadurch lassen sich mehrstufige, wiederholbare oder endlose Animationen gestalten – weit über einfache Hover-Effekte hinaus.
Grundsyntax:
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
Apply the animation to an element:
.element {
animation: fadeIn 1s ease-in forwards;
}
Parameter:
Erklärung:
Ein Element mit der Klasse .fade-in blendet sich sanft über eine Sekunde ein – von 0 auf volle Deckkraft.
Keyframes sind nicht auf Start und Ende beschränkt. Durch Zwischenschritte kannst du komplexe Bewegungen erzeugen.
Beispiel:
@keyframes slideAndFade {
0% {
opacity: 0;
transform: translateX(-100%);
}
50% {
opacity: 0.5;
transform: translateX(0);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
.slide-fade {
animation: slideAndFade 1.2s ease-out forwards;
}
Erklärung:
Das Element gleitet von links herein, während es langsam eingeblendet wird – ein eleganter Effekt, der Aufmerksamkeit lenkt.
Du kannst mehrere Animationen gleichzeitig oder zeitversetzt auf ein Element anwenden, um mehr Tiefe und Bewegung zu erzeugen.
Beispiel:
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes scale {
from { transform: scale(1); }
to { transform: scale(1.2); }
}
.combined {
animation: rotate 2s linear infinite, scale 2s ease-in-out infinite alternate;
}
Erklärung:
Das Element rotiert kontinuierlich und pulsiert gleichzeitig in der Größe – ein moderner Effekt, der besonders bei Icons und Logos beeindruckend wirkt.
Für flüssige Bewegungen, besonders auf mobilen Geräten, ist GPU-Beschleunigung entscheidend. Mit CSS-Transforms wie translateZ(0) kann der Browser Rendering-Prozesse an die Grafikkarte übergeben.
Beispiel:
.optimized {
transform: translateZ(0); /* Triggers GPU acceleration */
transition: transform 0.3s ease;
}
.optimized:hover {
transform: translateZ(0) scale(1.05);
}
Erklärung:
Durch das Hinzufügen von translateZ(0) wird Hardwarebeschleunigung aktiviert. Das Ergebnis sind flüssigere Animationen und bessere Performance – besonders auf leistungsschwächeren Geräten.
will-change gezielt:.animated {
will-change: transform, opacity;
}
CSS-Transitions und -Animationen sind mächtige Tools, um Webdesign lebendig, reaktionsfreudig und emotional ansprechend zu gestalten. Durch den gezielten Einsatz von Easing-Funktionen, Keyframes und Performance-Optimierungen kannst du deine Website deutlich aufwerten – ohne eine einzige Zeile JavaScript.
Setze Bewegung gezielt ein, um Nutzer:innen zu führen, Interaktionen zu betonen und deine Marke visuell erlebbar zu machen.
UNHYDE ist eine Webentwicklungsagentur aus München, spezialisiert auf High-Performance-Websites, UX-Design und digitale Markenstrategien. Wir entwickeln skalierbare Lösungen auf Plattformen wie Shopify und Webflow, die messbares Wachstum ermöglichen.
Ob du dein Webprojekt technisch optimieren oder visuell aufwerten möchtest – wir helfen dir, digitale Erlebnisse zu schaffen, die begeistern.
KONTAKTIERE UNS
Get in touch
contact now