emilkowalski/vocabulaire-animation

Que fait vocabulaire-animation ?

Compétence d'agent 'animation-vocabulary' issue de emilkowalski/skills. À utiliser lorsque la tâche correspond au domaine de cette compétence.

Aperçu

Cette compétence fournit une définition et une explication des termes courants liés à l'animation dans le développement web, comme les transitions, les transformations, les keyframes, les fonctions d'accélération (easing), et les animations basées sur le défilement (scroll-driven).

Utilisation

L'agent doit invoquer cette compétence lorsqu'il doit répondre à une question ou générer du code impliquant des animations CSS, des animations JavaScript, ou des intégrations avec des bibliothèques d'animation (Framer Motion, GSAP, Lottie, etc.).

Portée

• CSS Animations : @keyframes, animation-name, animation-duration, animation-timing-function, etc.
• CSS Transitions : transition-property, transition-duration, transition-timing-function, transition-delay.
• Fonctions d'accélération : ease, linear, ease-in, ease-out, ease-in-out, et cubic-bezier().
• Transformations : translate, rotate, scale, skew.
• Animations de défilement : scroll-timeline, view-timeline, animation-timeline.
• Accessibilité : Prise en compte de prefers-reduced-motion.

Exemples

Exemple CSS classique

@keyframes slideIn {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

.element {
  animation: slideIn 0.5s ease-out;
}

Exemple avec prefers-reduced-motion

@media (prefers-reduced-motion: reduce) {
  .element {
    animation: none;
  }
}

Contribution

Signalez des problèmes ou suggérez des améliorations dans le dépôt emilkowalski/skills.