Animations

Parfois, vous voyez de petits assistants sur les interfaces qui, lorsque vous cliquez dessus, fournissent des informations utiles sur cette section particulière. Ils sont souvent accompagnés d'une animation clignotante pour vous indiquer subtilement que les informations sont disponibles et que vous devez interagir avec elles. Ce module vous explique comment créer ces outils d'assistance et d'autres animations à l'aide de CSS.

Vous pouvez utiliser le CSS pour définir une séquence d'animation avec des images clés. Ces séquences peuvent être des animations de base à un seul état ou des séquences complexes basées sur le temps.

Qu'est-ce qu'une image clé ?

Dans la plupart des outils d'animation, les images clés sont le mécanisme que vous utilisez pour attribuer des états d'animation à des codes temporels sur une timeline.

Par exemple, voici une chronologie du point "assistant" clignotant. L'animation s'exécute pendant une seconde et comporte deux états.

États de l'animation du clignotant sur une période de 1 seconde

Chacun de ces états d'animation commence et se termine à un point spécifique. Vous les mappez sur la timeline à l'aide d'images clés.

Même schéma qu'auparavant, mais cette fois avec des images clés

@keyframes

Browser Support

  • Chrome: 43.
  • Edge: 12.
  • Firefox: 16.
  • Safari: 9.

Source

Les @keyframes CSS reposent sur le même concept que les images clés d'animation.

Voici un exemple avec deux états:

@keyframes my-animation {
  from {
    transform: translateY(20px);
  }
  to {
    transform: translateY(0px);
  }
}

La première partie importante est l'identifiant personnalisé (custom-ident), qui correspond au nom de la règle de clés-images. Dans cet exemple, l'identifiant est my-animation. L'identifiant personnalisé fonctionne comme un nom de fonction, ce qui vous permet de faire référence à la règle de keyframes ailleurs dans votre code CSS.

Dans la règle des images clés, from et to sont des mots clés qui représentent 0% et 100%, qui correspondent au début et à la fin de l'animation. Vous pouvez recréer la même règle comme suit:

@keyframes my-animation {
    0% {
        transform: translateY(20px);
    }
    100% {
        transform: translateY(0px);
    }
}

Vous pouvez ajouter autant de postes que vous le souhaitez au cours de la période. Dans l'exemple de l'aide de pulsation, il existe deux états qui se traduisent par deux keyframes. Cela signifie que vous disposez de deux positions dans votre règle d'images clés pour représenter les modifications de chacune de ces images clés.

@keyframes pulse {
  0% {
    opacity: 0;
  }
  50% {
    transform: scale(1.4);
    opacity: 0.4;
  }
}

Propriétés animation

Browser Support

  • Chrome: 43.
  • Edge: 12.
  • Firefox: 16.
  • Safari: 9.

Source

Pour utiliser votre @keyframes dans une règle CSS, vous pouvez définir différentes propriétés d'animation individuellement ou utiliser la propriété abrégée animation.

animation-duration

Browser Support

  • Chrome: 43.
  • Edge: 12.
  • Firefox: 16.
  • Safari: 9.

Source

.my-element {
    animation-duration: 10s;
}

La propriété animation-duration définit la durée de la timeline @keyframes sous la forme d'une valeur temporelle. La valeur par défaut est de 0 seconde, ce qui signifie que l'animation s'exécute toujours, mais qu'elle est trop rapide pour que vous puissiez la voir. Vous ne pouvez pas utiliser de valeurs temporelles négatives.

animation-timing-function

Browser Support

  • Chrome: 43.
  • Edge: 12.
  • Firefox: 16.
  • Safari: 9.

Source

Pour recréer un mouvement naturel dans une animation, vous pouvez utiliser des fonctions de temporisation qui calculent la vitesse d'une animation à chaque point. Les valeurs calculées sont souvent courbées, ce qui permet à l'animation de s'exécuter à des vitesses variables au cours de animation-duration et donne l'impression que l'élément rebondit si le navigateur calcule une valeur supérieure à celles définies dans @keyframes.

Plusieurs mots clés sont disponibles en tant que préréglages dans CSS, qui sont utilisés comme valeur pour animation-timing-function : linear, ease, ease-in, ease-out et ease-in-out.

.my-element {
    animation-timing-function: ease-in-out;
}

Les valeurs de la fonction d'atténuation semblent incurvées, car l'atténuation est calculée à l'aide d'une courbe de Bézier, un type de fonction utilisé pour modéliser la vitesse. Chacun des mots clés de fonction de temporisation, tels que ease, fait référence à une courbe de Bézier prédéfinie. En CSS, vous pouvez définir une courbe de Bézier directement à l'aide de la fonction cubic-bezier(), qui accepte quatre valeurs numériques: x1, y1, x2 et y2.

.my-element {
    animation-timing-function: cubic-bezier(.42, 0, .58, 1);
}

Ces valeurs représentent chaque partie de la courbe sur les axes X et Y.

Courbe de Bézier sur un graphique de progression par rapport au temps

Comprendre les courbes de Bézier est compliqué. Les outils visuels, comme ce générateur de Lea Verou, sont très utiles.

Fonction d'atténuation steps

Il peut arriver que vous souhaitiez contrôler plus précisément votre animation en effectuant des mouvements à intervalles plutôt que le long d'une courbe. La fonction d'atténuation steps() vous permet de diviser la chronologie en intervalles définis de durée égale.

.my-element {
    animation-timing-function: steps(10, end);
}

Le premier argument correspond au nombre d'étapes. Si le nombre de clés d'animation est identique au nombre d'étapes, chaque clé d'animation est lue de manière séquentielle pendant la durée exacte de son étape, sans transition entre les états. Si le nombre d'images clés est inférieur au nombre d'étapes, le navigateur ajoute des étapes entre les images clés en fonction du deuxième argument.

Le deuxième argument correspond à la direction. Si elle est définie sur end, ce qui est la valeur par défaut, les étapes se terminent à la fin de votre chronologie. Si elle est définie sur start, la première étape de votre animation se termine dès qu'elle commence, ce qui signifie qu'elle se termine une étape plus tôt que end.

animation-iteration-count

Browser Support

  • Chrome: 43.
  • Edge: 12.
  • Firefox: 16.
  • Safari: 9.

Source

.my-element {
    animation-iteration-count: 10;
}

La propriété animation-iteration-count définit le nombre de fois que la chronologie @keyframes doit s'exécuter pendant l'animation. Par défaut, cette valeur est définie sur 1, ce qui signifie que l'animation s'arrête lorsqu'elle atteint la fin de votre timeline. Cette valeur ne peut pas être un nombre négatif.

Pour créer une boucle d'animation, définissez le nombre d'itérations sur infinite. C'est ainsi que fonctionne l'animation pulsante du début de cette leçon.

animation-direction

Browser Support

  • Chrome: 43.
  • Edge: 12.
  • Firefox: 16.
  • Safari: 9.

Source

.my-element {
    animation-direction: reverse;
}

Vous pouvez définir la direction de la timeline sur vos images clés avec animation-direction, qui prend les valeurs suivantes:

  • normal: valeur par défaut, qui est "forward" (avant).
  • reverse: fait défiler votre chronologie à rebours.
  • alternate: pour chaque itération d'animation, la timeline alterne entre l'exécution en avant et en arrière.
  • alternate-reverse: comme alternate, mais l'animation commence avec la chronologie en marche arrière.

animation-delay

Browser Support

  • Chrome: 43.
  • Edge: 12.
  • Firefox: 16.
  • Safari: 9.

Source

.my-element {
    animation-delay: 5s;
}

La propriété animation-delay définit la durée d'attente du navigateur avant le début de l'animation. Comme la propriété animation-duration, elle accepte une valeur temporelle.

Contrairement à animation-duration, vous pouvez définir animation-delay comme une valeur négative, ce qui fait démarrer l'animation au point correspondant de votre timeline. Par exemple, si votre animation dure 10 secondes et que vous définissez animation-delay sur -5s, l'animation commence à mi-chemin de votre chronologie.

animation-play-state

Browser Support

  • Chrome: 43.
  • Edge: 12.
  • Firefox: 16.
  • Safari: 9.

Source

.my-element:hover {
    animation-play-state: paused;
}

La propriété animation-play-state vous permet de lire et de mettre en pause l'animation. La valeur par défaut est running. Si vous définissez cet élément sur paused, l'animation est mise en pause.

animation-fill-mode

Browser Support

  • Chrome: 43.
  • Edge: 12.
  • Firefox: 16.
  • Safari: 9.

Source

La propriété animation-fill-mode définit les valeurs de votre chronologie @keyframes qui persistent avant le début de l'animation ou après sa fin. La valeur par défaut est none, ce qui signifie que lorsque l'animation est terminée, les valeurs de votre chronologie sont supprimées. Vous pouvez également opter pour les options suivantes :

  • forwards: la dernière image clé persiste, en fonction du sens de l'animation.
  • backwards: la première image clé persiste, en fonction du sens de l'animation.
  • both: le premier et le dernier frame clé persistent.

Raccourci animation

Au lieu de définir chaque propriété séparément, vous pouvez les définir dans une abréviation animation, ce qui vous permet de définir les propriétés d'animation dans l'ordre suivant:

  1. animation-name
  2. animation-duration
  3. animation-timing-function
  4. animation-delay
  5. animation-iteration-count
  6. animation-direction
  7. animation-fill-mode
  8. animation-play-state
.my-element {
    animation: my-animation 10s ease-in-out 1s infinite forwards forwards running;
}

Éléments à prendre en compte lors de l'utilisation d'animations

Les utilisateurs peuvent configurer leur système d'exploitation pour privilégier les mouvements réduits lorsqu'ils interagissent avec des applications et des sites Web. Vous pouvez détecter cette préférence à l'aide de la requête multimédia prefers-reduced-motion:

@media (prefers-reduced-motion) {
  .my-autoplaying-animation {
    animation-play-state: paused;
  }
}

Il ne s'agit pas nécessairement d'une préférence pour l'absence d'animation. Nous préférons moins d'animation, en particulier moins d'animation inattendue. Pour en savoir plus sur cette préférence et les performances globales, consultez notre guide d'animation.

Vérifier vos connaissances

Tester vos connaissances sur les animations

Le nom ou l'identifiant personnalisé d'une animation @keyframes est-il sensible à la casse ?

Non
Oui

Les mots clés from et to sont identiques à:

0% et 100%.
0 et 1
start et end.

animation-timing-function est également couramment appelé:

Calendrier dynamique
Accélération
Délai

Quel est le nombre minimal d'images clés requis dans une animation @keyframes ?

2
1
3
4