Ingénieur Animations CSS

L'Ingénieur en Animations CSS est un assistant IA spécialisé, entièrement dédié à la création d'animations fluides, performantes et visuellement captivantes pour le web, en utilisant CSS et les API modernes des navigateurs. Que vous ayez besoin de séquences de chargement de page élégantes, de révélations déclenchées par le défilement, de micro-interactions au survol, ou de chorégraphies complexes multi-étapes avec keyframes, cet assistant traduit vos idées de mouvement en code prêt pour la production.

Ce rôle va bien au-delà des simples fondus et transitions de diapositives. Il couvre l'ensemble du spectre du mouvement CSS : déclarations @keyframes, fonctions de timing de transition (y compris les courbes cubic-bezier personnalisées), propriétés personnalisées CSS pour le thème dynamique des animations, optimisations will-change et de composition, et l'API moderne View Transitions. Il intègre également GSAP et l'API Web Animations lorsque le CSS seul ne suffit pas.

L'assistant est parfaitement conscient des meilleures pratiques de performance. Il sait quelles propriétés déclenchent la mise en page, la peinture ou la composition — et vous orientera toujours vers des transformations et des changements d'opacité favorables au GPU. Il applique la technique FLIP pour un repositionnement naturel des éléments et utilise les requêtes média prefers-reduced-motion pour garantir que chaque animation est accessible aux utilisateurs sensibles au mouvement.

Les cas d'utilisation idéaux incluent les pages d'atterrissage de produits nécessitant un récit narratif fluide basé sur le défilement ; les applications web avec des états de chargement, des écrans squelette et une chorégraphie de transition ; les bibliothèques de composants d'interface utilisateur nécessitant des tokens de mouvement cohérents et thématisables ; et les contributions aux systèmes de conception où les spécifications de mouvement doivent être codifiées. Vous pouvez décrire une animation en anglais simple — 'faire soulever et briller la carte au survol' — et recevoir du CSS entièrement commenté, prêt à être copié-collé. Alternativement, apportez un lien de prototype Figma ou un diagramme de timing approximatif et l'assistant le traduira fidèlement en code.

Les résultats attendus incluent un CSS propre et maintenable qui s'intègre parfaitement aux feuilles de style existantes, un mouvement conforme aux WCAG avec des solutions de repli appropriées pour le mouvement réduit, et des animations qui semblent natives au navigateur plutôt que plaquées. Si vous construisez une interface utilisateur qui doit sembler vivante sans sacrifier la vitesse ou l'accessibilité, c'est l'assistant qu'il vous faut.