Achtzehn fertige CSS-Übergänge, jeder per Klick kopiert und ohne eine einzige Zeile JavaScript einsetzbar: Die Sammlung Transitions.dev des Designers Jakub Antalik bündelt die Mikroanimationen, die in fast jedem Web-Interface vorkommen. Seit Ende Mai stehen dieselben Übergänge zusätzlich als installierbarer Skill für KI-Coding-Werkzeuge wie Claude Code, Cursor und GitHub Copilot bereit.
drweb.de als bevorzugte Quelle auf Google hinzufügenQualitätsgeprüfte Inhalte direkt in Google News & DiscoverJetzt hinzufügen
Sie einfach in jedes beliebige Projekt kopieren und einfügen können.
Das Wichtigste in Kürze
- Transitions.dev versammelt 18 essenzielle CSS-Übergänge für Web-Apps, von Modal und Dropdown über Skeleton-Loader bis zum Erfolgs-Häkchen.
- Jeder Schnipsel bringt semantische CSS-Variablen, einen eigenen Klassen-Namensraum und eine Absicherung für prefers-reduced-motion mit.
- Über den Befehl npx skills add bindet sich die Sammlung als Skill in Claude Code, Cursor, GitHub Copilot, Codex und Gemini CLI ein.
- Die Schnipsel laufen ohne Framework und passen damit auch in klassische WordPress-Themes.
Was steckt in der Sammlung?
Alltägliche Mikroanimationen. Die Sammlung deckt genau die Übergänge ab, die im Produktalltag immer wieder gebraucht werden. Dazu zählen das weiche Vergrößern einer Karte, der federnde Auftritt eines Benachrichtigungs-Badges, das maßstäbliche Öffnen eines Modals, ein herkunftsbewusstes Dropdown, der seitliche Wechsel zwischen zwei Seiten, ein Icon-Tausch mit Unschärfe sowie ein Erfolgs-Häkchen, das sich beim Bestätigen aufbaut. Auch Skeleton-Loader, gleitende Tabs und ein zitterndes Eingabefeld bei Validierungsfehlern sind dabei.
Sauber gebaut. Jeder Übergang liegt als eigenständiger CSS-Schnipsel vor. Die Werte stehen als semantische Custom Properties im :root-Block, und die Regeln tragen einen eigenen Namensraum mit t-Präfix. Ein zusätzlicher Block für prefers-reduced-motion respektiert die Bewegungspräferenz des Nutzers. Diese deklarative Linie kennen Frontend-Teams bereits aus dem Umstieg von Tooltip-Bibliotheken auf natives CSS und aus den Webdesign Trends 2026.
Warum ist daraus jetzt ein KI-Skill geworden?
Konsistenz für Agenten. Coding-Agenten produzieren Bewegung oft generisch und in jedem Durchlauf etwas anders. Der Skill übergibt den Werkzeugen stattdessen Antaliks abgestimmte Vorlagen, samt fertiger HTML-Hooks und getesteter Zeitkurven. Installiert wird er mit einem einzigen Aufruf über npx skills add auf der Projektseite.
Drei Kommandos. Im Agenten stehen drei Befehle bereit:
transitions reveallistet alle verfügbaren Übergänge als nummerierte Übersicht.transitions reviewdurchsucht ein Projekt schreibgeschützt nach handgestrickten Animationen und zeigt pro Datei, wo ein Standard-Übergang besser sitzt.transitions applyerkennt den passenden Übergang im aktuellen Kontext, begründet den Vorschlag und baut ihn nach Bestätigung ein.
Was bedeutet das für WordPress- und Frontend-Teams?
Direkt einsetzbar. Da die Schnipsel ohne Framework auskommen, landen sie ohne Build-Schritt im Stylesheet eines Themes. Den :root-Block fügen Sie einmalig global ein, danach genügt der jeweilige t-Klassen-Block samt der dokumentierten HTML-Hooks. Die eingebaute Rücksicht auf prefers-reduced-motion erfüllt zugleich eine Anforderung, die auch beim barrierearmen Responsive Design zählt.
Klarer nächster Schritt. Prüfen Sie das eigene Theme auf handgestrickte Keyframes und hartkodierte Dauern. Für ein typisches WordPress-Projekt mit Menü, Tooltips und Modals lohnt sich ein Abgleich mit der Sammlung, weil sich getestete Übergänge meist schneller einsetzen lassen als eigene. Teams, die ohnehin mit Claude Code oder Cursor arbeiten, halten ihre Bewegung über den Skill projektübergreifend einheitlich.
Mehr Newshunger?
