Guide de lecture localisé
web-animation-designObjectif, utilisation et source
Concevez et implémentez des animations web fluides et naturelles. Utilisez cette compétence de manière proactive dès que l'utilisateur pose des questions sur les animations, les mouvements, les effets d'interpolation, le timing, la durée, les ressorts, les transitions ou les performances d'animation. Cela inclut les questions sur l'animation d'éléments d'interface spécifiques, le choix de l'effet d'interpolation, les bonnes pratiques d'animation ou les considérations d'accessibilité liées aux mouvements. Déclencheurs : effets d'interpolation, accélération/décélération, courbes de Bézier cubiques, rebond, physique des ressorts, images clés, transformation, opacité, fondu, glissement, mise à l'échelle, effets de survol, micro-interactions, Framer Motion, React Spring, GSAP, transitions CSS.entrance/exitanimations, transitions de page, décalage, changement automatique, accélération GPU, préférence pour les animations réduites,modal/dropdown/tooltip/popover/drawerLes animations, les animations gestuelles, les interactions par glisser-déposer, la sensation de pression des boutons sont saccadées, rendez-les fluides.
Source récupérée:
- Dépôt source
- vercel-labs/open-agents
- SKILL.md
.agents/skills/web-animation-design/SKILL.md- Étoiles du dépôt
- 5,871
- Mise à jour du dépôt
- 2026-08-29
- Catégories de capacités
- Flux de travail de l'agent
- Dernière collecte
Licence : MIT
Les extraits de flux de travail sont des outils de lecture et non des instructions exécutables de Codez. Aucune compétence tierce n'a été utilisée pour générer cette page.
Les passages relatifs à l'objectif et au flux de travail ci-dessous constituent le contenu original, organisé et traduit pour la lecture. Ils sont distincts de l'analyse éditoriale de Codez, qui est étiquetée séparément.
À quoi sert cette compétence ?
Concevez et implémentez des animations web fluides et naturelles. Utilisez cette compétence de manière proactive dès que l'utilisateur pose des questions sur les animations, les mouvements, les effets d'interpolation, le timing, la durée, les ressorts, les transitions ou les performances d'animation. Cela inclut les questions sur l'animation d'éléments d'interface spécifiques, le choix de l'effet d'interpolation, les bonnes pratiques d'animation ou les considérations d'accessibilité liées aux mouvements. Déclencheurs : effets d'interpolation, accélération/décélération, courbes de Bézier cubiques, rebond, physique des ressorts, images clés, transformation, opacité, fondu, glissement, mise à l'échelle, effets de survol, micro-interactions, Framer Motion, React Spring, GSAP, transitions CSS.entrance/exitanimations, transitions de page, décalage, changement automatique, accélération GPU, préférence pour les animations réduites,modal/dropdown/tooltip/popover/drawerLes animations, les animations gestuelles, les interactions par glisser-déposer, la sensation de pression des boutons sont saccadées, rendez-les fluides.
Comment fonctionne le flux de travail en amont
Démarrage rapide
Chaque décision d'animation commence par ces questions : cet élément entre-t-il ou sort-il ? → Utiliserease-outUn élément à l'écran est-il en mouvement ? → Utiliserease-in-outEst-ce unhover/colortransition ? → Utiliserease
Quand animer
Enter/exitTransitions pour une cohérence spatiale. Changements d'état qui bénéficient d'une continuité visuelle. Réponses aux actions de l'utilisateur (retour d'information). Interactions rarement utilisées où l'effet de surprise apporte une valeur ajoutée.
passage en amont · L144 ↗Quand utiliser des ressorts
Interactions par glisser avec inertie ; éléments qui doivent paraître « vivants » (Île dynamique) ; gestes pouvant être interrompus en cours d’animation ; interfaces organiques et ludiques.
passage en amont · L169 ↗Before: transform: scale(0)
After: transform: scale(0.95)
────────────────────────────
Before: 400ms duration
After: 200msConfiguration requise
Aucun extrait de configuration n'a été sélectionné dans ce fichier. Cela ne signifie pas que la compétence est sans dépendances. Consultez les instructions de configuration du dépôt et les fichiers référencés.
Limites et contrôles de qualité
transition en douceur (presque jamais)
À éviter pour les animations d'interface utilisateur. Elles rendent les interfaces lentes car le démarrage lent retarde le retour visuel.
passage en amont · L100 ↗Commencez par un essai sans danger
- Vérifiez l'hôte pris en charge et les instructions d'installation du dépôt. Conservez le répertoire Skill ainsi que ses scripts, ressources et documentation référencés ;SKILL.mdSeul, il peut omettre les dépendances.
- Indiquez à l'agent vos paramètres d'entrée réels, le résultat souhaité et les critères d'acceptation. La syntaxe d'appel et les outils disponibles dépendent du système hôte ; ce site ne propose pas de commande d'installation universelle.
- Testez le flux de travail source dans un projet temporaire ou sur une copie. Avant d'autoriser les opérations qui modifient des fichiers, des services distants ou des ressources facturables, examinez-les attentivement.
- Vérifiez la conformité du résultat avec les contrôles qualité sources et vos propres exigences. Un déclenchement réussi ou un nombre élevé d'étoiles dans le dépôt ne garantissent pas un résultat correct.
Pour en savoir plus, consultez la source.
- Conception d'animations Web
- Réponse initiale
- Format de révision (obligatoire)
- Démarrage rapide
- sortie en douceur (la plus courante)
- en douceur (pour le mouvement)
- facilité (pour les effets de survol)
- linéaire (À éviter dans l'interface utilisateur)
- transition en douceur (presque jamais)
- Règle des éléments appariés
- Directives relatives à la durée
- La fréquence
- Quand animer
- Animations printanières
- Quand utiliser des ressorts
- Configuration
- Règles de rebond
- interruptibilité
- La règle d'or
- Techniques d'optimisation
- CSS vs. JavaScript
- Accessibilité
- préfère-mouvement-réduit
- Directives relatives à la réduction des mouvements
- Considérations relatives aux appareils tactiles
- Conseils pratiques
- Organigramme de décision simplifié
- Fichiers de référence
Compétences connexes
Traduction et étendue
Ce guide de lecture sélectionne des passages de l'amont épingléSKILL.mdCette traduction est assistée. Elle ne constitue pas un manuel complet et ne garantit pas une compatibilité testée. Veuillez lire le document original et les fichiers auxquels il fait référence avant utilisation.
Cette introduction fait référence à la version épinglée ci-dessous ; l’activité actuelle du dépôt et la durée de la collecte sont indiquées séparément.
- Source épinglée
- Lire l'original ↗
- Source récupérée
- Commit source
cf865e94de7729751c747171785b6ce57e7b178c- Source SHA-256
dfcfd66edc4b09e22416c8be59160fd15259965e5f6f1cfa098858d7b23d4332