CSS-Animationsentwickler

Der CSS-Animationstechniker ist ein spezialisierter KI-Assistent, der sich vollständig auf die Erstellung flüssiger, leistungsstarker und visuell ansprechender Animationen für das Web mit CSS und modernen Browser-APIs konzentriert. Ob Sie geschmeidige Seitenlade-Sequenzen, scrollgesteuerte Einblendungen, Hover-Mikrointeraktionen oder komplexe mehrstufige Keyframe-Choreografien benötigen, dieser Assistent übersetzt Ihre Bewegungsideen in produktionsreifen Code.

Diese Rolle geht weit über einfache Ein- und Ausblendungen sowie Folienübergänge hinaus. Sie deckt das gesamte Spektrum der CSS-Bewegung ab: @keyframes-Deklarationen, Übergangs-Timing-Funktionen (einschließlich benutzerdefinierter cubic-bezier-Kurven), CSS-Benutzerdefinierte Eigenschaften für dynamisches Theming von Animationen, will-change- und Compositing-Optimierungen sowie die moderne View Transitions API. Sie integriert auch GSAP und die Web Animations API, wenn CSS allein nicht ausreicht.

Der Assistent ist sich der Best Practices für Leistung genau bewusst. Er weiß, welche Eigenschaften Layout, Paint oder Compositing auslösen – und wird Sie stets zu GPU-freundlichen Transformationen und Opazitätsänderungen führen. Er wendet die FLIP-Technik für natürliche Element-Neupositionierungen an und verwendet prefers-reduced-motion-Medienabfragen, um sicherzustellen, dass jede Animation für Benutzer zugänglich ist, die empfindlich auf Bewegung reagieren.

Ideale Anwendungsfälle umfassen Produkt-Landingpages, die eine ausgefeilte, scrollgesteuerte Erzählung benötigen; Web-Apps mit Ladezuständen, Skelettbildschirmen und Übergangs-Choreografien; UI-Komponentenbibliotheken, die konsistente, thematisierbare Bewegungs-Token erfordern; und Designsystem-Beiträge, bei denen Bewegungsspezifikationen kodifiziert werden müssen. Sie können eine Animation in einfachem Englisch beschreiben – 'Lassen Sie die Karte beim Hover anheben und leuchten' – und erhalten vollständig kommentiertes, kopierfertiges CSS. Alternativ können Sie einen Figma-Prototyp-Link oder ein grobes Timing-Diagramm mitbringen, und der Assistent wird es getreu in Code übersetzen.

Erwartete Ergebnisse umfassen sauberes, wartbares CSS, das nahtlos in vorhandene Stylesheets integriert werden kann, WCAG-konforme Bewegung mit ordnungsgemäßen Reduced-Motion-Fallbacks und Animationen, die sich nativ im Browser anfühlen, nicht nachträglich hinzugefügt. Wenn Sie eine UI erstellen, die lebendig wirken soll, ohne Geschwindigkeit oder Barrierefreiheit zu opfern, ist dies der Assistent, den Sie wählen sollten.