⚡UX Design

Micro-Interactions

Kleine Animationen die deine App lebendig machen

Micro-Interactions sind die kleinen Animationen die eine App von gut zu grossartig machen. Ein Button der beim Hover leicht waechst, ein Toggle der sanft gleitet, ein Like-Button der kurz aufblitzt. Diese Details machen den Unterschied.

Pro-Tip — Der schnelle Weg
Animiere immer transform und opacity, nie width, height oder margin. Transform-Animationen laufen auf der GPU und sind butterweich, die anderen verursachen Layout-Neuberechnungen.
Seite 1
1

Hover-Effekte

Der einfachste Einstieg sind Hover-Effekte. Tailwind hat transition-all eingebaut. Kombinier es mit hover-Scale, hover-Shadow oder Farbwechseln.

<button className="transition-all duration-200 hover:scale-105 hover:shadow-lg active:scale-95">
 Klick mich
</button>


<a className="transition-colors duration-150 hover:text-primary">
 Link
</a>
2

Einblend-Animationen

Elemente die sanft einblenden statt abrupt erscheinen. CSS-Keyframes oder Framer Motion fuer komplexere Animationen.

/* globals.css */
@keyframes fadeIn {
 from { opacity: 0; transform: translateY(8px); }
 to { opacity: 1; transform: translateY(0); }
}


.animate-fadeIn {
 animation: fadeIn 0.3s ease-out;
}
3

Toggle und Switch

Ein sanft gleitender Toggle ist das Paradebeispiel fuer Micro-Interactions. Die Kugel bewegt sich mit transition-transform und der Hintergrund wechselt die Farbe.

<button
 onClick={() => setEnabled(!enabled)}
 className={`relative w-12 h-6 rounded-full transition-colors duration-200 ${
 enabled ? "bg-primary" : "bg-gray-300"
 }`}
>
 <span className={`absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full transition-transform duration-200 ${
 enabled ? "translate-x-6" : ""
 }`} />
</button>
4

Feedback-Animationen

Zeig dem User dass seine Aktion registriert wurde. Ein kurzer Shake bei Fehler, ein Haekchen bei Erfolg, ein Pulse bei Laden.

<div className="animate-pulse">Laden...</div>


/* Shake Animation */
@keyframes shake {
 0%, 100% { transform: translateX(0); }
 25% { transform: translateX(-4px); }
 75% { transform: translateX(4px); }
}
.animate-shake { animation: shake 0.3s ease-in-out; }
Seite 2
Warum das funktioniert
  • Micro-Interactions geben sofortiges Feedback auf User-Aktionen
  • Sanfte Uebergaenge reduzieren kognitive Belastung
  • Transform-Animationen sind performant weil sie die GPU nutzen
  • Kleine Details unterscheiden Amateur von Profi
Tipps
  • Duration 150-300ms fuer die meisten Interaktionen
  • ease-out fuer Einblenden, ease-in fuer Ausblenden
  • Reduziere Animationen mit prefers-reduced-motion Media Query
  • Framer Motion fuer komplexe Animationen, Tailwind fuer einfache
Seite 3
Bereit für den nächsten Schritt?

KIWorld VibeCoding Masterclass

Du willst nicht nur einzelne Tools einrichten, sondern wirklich lernen wie du mit KI komplette Apps, Websites und SaaS-Produkte baust? Über 700 Videos — von Anfänger bis Fortgeschritten — in jedem Bereich. Von der Idee bis zum fertigen Produkt, ohne eine Zeile Code selbst zu schreiben.

Jetzt Masterclass ansehen