Réglez la durée, le délai et l'easing avec des curseurs, voyez la courbe cubic-bezier tracée, comparez les transitions aux @keyframes et copiez 20 micro-interactions de survol qui respectent la réduction des animations.
Une transition CSS anime une propriété en douceur quand sa valeur change, par exemple au survol : transition: transform 200ms ease-out. Elle a besoin d'un état de départ et d'un état d'arrivée, et s'exécute une fois par changement. Les animations @keyframes définissent leurs propres étapes, peuvent tourner en boucle et démarrent sans aucun changement d'état. Animez transform et opacity pour obtenir le rendu le plus fluide.
transition, partie par partie
Le bac à sable anime un vrai élément entre deux états avec la propriété, la durée, le délai et l'easing que vous choisissez, et trace l'easing sous forme de courbe pour que vous compreniez pourquoi ease-out paraît vif et ease-in paraît mou. Plus bas, vingt effets de survol et de focus à modifier en direct et à coller dans n'importe quel site.
Une transition réagit à un changement de valeur, comme l'ajout d'une classe ou le début d'un survol, et va seulement de l'ancienne valeur à la nouvelle. Une animation utilise @keyframes, peut avoir de nombreuses étapes, se répéter ou alterner, et s'exécute dès qu'elle est appliquée. Utilisez les transitions pour les changements d'état et les keyframes pour les loaders et les signaux d'attention.
Causes fréquentes : la propriété n'est pas animable (display ne l'était pas avant allow-discrete), la valeur de départ est auto (height: auto ne peut pas être interpolé sans les fonctionnalités récentes), l'élément vient d'être inséré et n'a donc pas de style précédent, ou la transition n'est déclarée que sur l'état de survol, si bien qu'elle revient d'un coup quand la souris sort.
transform et opacity peuvent généralement être gérées par le compositeur sans recalculer la mise en page ni repeindre, elles restent donc fluides. Animer width, height, top, left ou margin force un calcul de mise en page à chaque image, et box-shadow ou filter provoquent des repaints, ce qui peut saccader sur les téléphones plus lents.
Il décrit la courbe d'easing avec deux points de contrôle, cubic-bezier(x1, y1, x2, y2). Les valeurs x représentent le temps et doivent rester entre 0 et 1 ; les valeurs y représentent la progression et peuvent sortir de cette plage, ce qui crée un dépassement ou un petit rebond.
Utilisez la media query @media (prefers-reduced-motion: reduce) pour raccourcir ou supprimer les mouvements. Une approche simple consiste à garder les changements de couleur et d'opacité mais à retirer les transforms, ou à fixer transition-duration et animation-duration à une valeur minime dans cette requête.
Quand utiliser l'une ou l'autre
Travail de rendu par image (règle générale, varie selon le navigateur)
Garde les changements d'état mais supprime le déplacement. Placez-le vers la fin de la feuille de style.
Une amélioration pour les navigateurs qui prennent en charge allow-discrete et @starting-style. Les autres affichent et masquent instantanément.
Survolez ou donnez le focus à chaque résultat pour le voir s'animer. Chaque extrait se termine par une règle de réduction des animations.
Soulève une carte et accentue son ombre.
Un léger agrandissement au survol et un enfoncement au clic.
La ligne s'étend depuis la gauche grâce à la taille de l'arrière-plan.
Les couleurs de fond et de texte s'échangent ensemble.
L'icône bouge pendant que le libellé reste immobile.
Un plus se transforme en croix.
Le décalage du contour s'anime pour les utilisateurs du clavier.
L'image s'agrandit mais le cadre la rogne.
La légende glisse vers le haut depuis le bord inférieur.
Une ombre colorée apparaît en fondu.
Quelques degrés de rotation donnent à un autocollant un air décontracté.
La couleur de bordure passe du gris au bleu de la marque.
Survoler un élément estompe ses voisins.
Une bande de lumière traverse l'élément au survol.
Une case à cocher stylée en interrupteur avec un curseur qui glisse.
Le marqueur pivote quand un élément details s'ouvre.
Un point d'état en boucle construit avec @keyframes.
Un timing linear garde une rotation régulière.
fill-mode both le garde masqué pendant le délai.
Une courte secousse horizontale, jouée une fois au survol ici.
Courbe d'easing cubic-bezier({values})
Lire vers l'avant
Lire en arrière
Votre appareil demande moins d'animations, l'aperçu saute donc d'un état à l'autre au lieu de se déplacer.
Propriété à animer
Durée : {n}ms
Délai : {n}ms
Easings prédéfinis
Copier le CSS
Commencer gratuitement · Sans carte bancaire