<animate>

Baseline

Large disponibilité

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis janvier 2020.

Voir la compatibilité complète
En savoir plus

L'élément SVG <animate> fournit un moyen d'animer un attribut d'un élément au fil du temps.

Contexte d'utilisation

Catégories	Élément d'animation
Contenu autorisé	Tout élément de cette liste, quel qu'en soit l'ordre : Éléments descriptifs

Attributs

Cet élément n'inclut que les attributs universels.

Interface DOM

Cet élément implémente l'interface SVGAnimateElement.

Exemples

html,
body,
svg {
  height: 100%;
  margin: 0;
  padding: 0;
}

html

<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
  <rect width="10" height="10">
    <animate
      attributeName="rx"
      values="0;5;0"
      dur="10s"
      repeatCount="indefinite" />
  </rect>
</svg>

Les animations clignotantes et scintillantes peuvent poser problème aux personnes ayant des préoccupations cognitives telles que le trouble déficitaire de l'attention avec hyperactivité (TDAH). De plus, certains types de mouvements peuvent déclencher des troubles vestibulaires, l'épilepsie, la migraine et la sensibilité scotopique.

Considérez la possibilité de fournir un mécanisme pour mettre en pause ou désactiver l'animation, ainsi que d'utiliser la Requête Média pour le Mouvement Réduit ou l'équivalent d'indice client de l'agent utilisateur Sec-CH-Prefers-Reduced-Motion afin de créer une expérience complémentaire pour les utilisateur·ice·s ayant exprimé une préférence pour l'absence d'animations.