Animations CSS pour HyperFrames

Ce que cela fait

Fournit des modèles pratiques et des conseils d'adaptation pour l'utilisation d'animations CSS keyframe avec le runtime HyperFrames. Il explique le contrat requis pour un mouvement CSS recherchable (data-start/data-duration), recommande des durées finies et des modes de remplissage, et présente des modèles de base et échelonnés avec des exemples de code afin que les agents puissent générer du HTML/CSS restituable que HyperFrames contrôlera de manière déterministe.

Quand l'utiliser

Utilisez cette compétence lorsqu'un mouvement appartient à un seul élément ou à une couche décorative (miroitements, lueurs, masques, entrées simples) et que vous souhaitez une solution légère, uniquement en CSS, au lieu d'une chronologie JS complète. Privilégiez-la pour les motifs répétés avec des nombres d'itérations connus ou les mouvements d'arrière-plan non liés aux événements utilisateur. Évitez-la lorsque la chorégraphie nécessite de nombreux éléments ou des déclencheurs interactifs.

Ce qui est inclus

• Scripts : aucun détecté (has_scripts=false)
• Références : liens MDN et pointeurs vers les sources d'adaptation inclus dans le SKILL.md (has_references=false)
• Instructions : règles de contrat (placer l'élément avant l'initialisation du runtime, utiliser data-start/data-duration, animation-duration et iteration-count finis, préférer animation-fill-mode: both), exemples de modèles de base et d'échelonnement, commandes de validation (npx hyperframes lint, npx hyperframes validate).

Agents compatibles

Idéal pour les agents orientés code capables de rédiger des extraits HTML/CSS et d'exécuter une validation simple (agents Copilot/Code, Cursor, Gemini Code). Les agents qui produisent des modèles HTML pour les pipelines de rendu en bénéficieront le plus.