Spielwiese

Bewegung und Effekte

Kleine Demos, die zeigen, wie sich Transitions und Animationen technisch unterscheiden. Beide zusammen machen Interfaces lebendig.

TRANSITION (Trigger nötig)

Maus drauf — Karte hebt sich, Border wird lime, **echter** Lime-Schein leuchtet unter ihr auf.

Wofür: klickbare Karten, Pricing-Pläne, Onboarding-Choices — der Nutzer fühlt sofort „das geht".

hover:-translate-y-1
hover:border-primary
hover:shadow-[0_8px_40px
_-4px_var(--primary)]

ANIMATION (läuft von selbst)

Der Lime-Ring wandert von allein nach außen — kein Trigger, läuft endlos im Loop.

@keyframes pulse-ring { … }
animation: pulse-ring 1.6s infinite;

Titel · Beschreibung · „Mehr lesen →"

TRANSITION (Multi-Property)

Bild zoomt + Info-Overlay slidet von unten rein — beides gleichzeitig, koordiniert über group/group-hover.

Wofür: Foto-Galerien, Produktkarten, Blog-Tiles — Bild dominiert, Zusatzinfo erscheint nur auf Wunsch (spart Platz).

overflow-hidden + group
group-hover:scale-110
group-hover:translate-y-0

TRANSITION (3D)

3D-Drehung um die Y-Achse. Vorder- und Rückseite tauschen.

Hover für Rückseite →

✨ Rückseite

perspective: 800px
transform-style: preserve-3d
hover .inner { rotateY(180deg) }

ANIMATION (steps)

steps()-Easing macht den sonst sanften Übergang zu diskreten Schritten — Buchstabe für Buchstabe.

Tippt sich von selbst

@keyframes type-in-out { … }
animation: ... 5s steps(21) infinite;