Animations

L'animation est un excellent moyen de mettre en évidence des éléments interactifs et d'ajouter de l'intérêt et du plaisir à vos conceptions. Dans ce module, découvrez comment ajouter et contrôler des effets d'animation avec CSS.

Parfois, de petits assistants s'affichent sur les interfaces et fournissent des informations utiles sur la section dans laquelle ils se trouvent lorsque vous cliquez dessus. Celles-ci comportent souvent une animation clignotante pour vous informer subtilement que les informations sont présentes et doivent faire l'objet d'une interaction. Ce module vous explique comment créer ces assistants et d'autres animations à l'aide de CSS.

Vous pouvez utiliser du code CSS pour définir une séquence d'animation avec des images clés. Ces séquences peuvent être des animations de base à un é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 constituent le mécanisme qui permet d'attribuer des états d'animation aux horodatages d'une timeline.

Par exemple, voici la chronologie du point d'aide clignotant. L'animation s'exécute pendant 1 seconde et présente deux états.

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

@keyframes

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);
  }
}

Le premier aspect important est l'identifiant personnalisé (custom-ident), qui est le nom de la règle d'images clés. Dans cet exemple, l'identifiant est my-animation. L'identifiant personnalisé fonctionne comme un nom de fonction, ce qui vous permet de référencer la règle d'images clés ailleurs dans votre code CSS.

Dans la règle relative aux images clés, from et to se trouvent des mots clés qui représentent 0% et 100%, qui sont le 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 positions que vous le souhaitez sur la période. Dans l'exemple de l'outil d'aide clignotant, deux états se traduisent en deux images clés. Cela signifie que vous avez deux positions dans votre règle d'images clés pour représenter les modifications apportées à chacune d'elles.

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

Propriétés animation

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

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

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

animation-timing-function

Pour vous aider à recréer un mouvement naturel dans une animation, vous pouvez utiliser des fonctions de minutage qui calculent la vitesse d'une animation à chaque point. Les valeurs calculées sont souvent courbes. L'animation s'exécute à des vitesses variables tout au long de animation-duration, et l'élément semble rebondir 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. Ils sont utilisés comme valeur pour animation-timing-function : linear, ease, ease-in, ease-out, ease-in-out.

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

Les valeurs de la fonction de lissage de vitesse semblent courbes, car le lissage de vitesse est calculé à l'aide d'une courbe de Bézier, un type de fonction utilisé pour modéliser la vitesse. Chacun des mots clés de la fonction de minutage, comme 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 le long des axes X et Y.

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

Fonction de lissage de vitesse steps

Il se peut que vous souhaitiez contrôler plus précisément votre animation en la déplaçant par intervalles plutôt que le long d'une courbe. La fonction de lissage de vitesse 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 est le nombre de pas. S'il y a le même nombre d'images clés que d'étapes, chaque image clé est lue en séquence pendant la durée exacte de son pas, sans transition entre les états. S'il y a moins d'images clés que d'étapes, le navigateur ajoute des étapes entre les images clés en fonction du deuxième argument.

Le deuxième argument est la direction. S'il est défini sur end (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 démarre, ce qui signifie qu'elle se termine une étape avant end.

animation-iteration-count

.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. La valeur par défaut est 1, ce qui signifie que l'animation s'arrête lorsqu'elle atteint la fin de la timeline. Cette valeur ne peut pas être un nombre négatif.

Pour que votre animation soit lue en boucle, définissez le nombre d'itérations sur infinite. C'est ainsi que fonctionne l'animation clignotante du début de cette leçon.

animation-direction

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

Vous pouvez définir la direction d'exécution de la timeline sur vos images clés à l'aide de animation-direction, qui prend les valeurs suivantes:

• normal: valeur par défaut, à savoir une valeur de transfert.
• reverse: revient en arrière sur la chronologie.
• alternate: pour chaque itération de l'animation, la timeline alterne entre l'avance rapide et l'exécution en arrière.
• alternate-reverse: semblable à alternate, mais l'animation commence par le retour à la chronologie.

animation-delay

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

La propriété animation-delay définit le délai d'attente du navigateur avant de lancer l'animation. Comme pour la propriété animation-duration, cette opération prend une valeur temporelle.

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

animation-play-state

.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 la définissez sur paused, l'animation se met en pause.

animation-fill-mode

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

• forwards: la dernière image clé persiste, en fonction de la direction de l'animation.
• backwards: la première image clé persiste, en fonction de la direction de l'animation.
• both: la première et la dernière images clés sont conservées.

La forme abrégée animation

Au lieu de définir chaque propriété séparément, vous pouvez les définir dans un raccourci animation, ce qui vous permet de définir les propriétés de l'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;
}

Points à prendre en compte lorsque vous utilisez des animations

Les utilisateurs peuvent configurer leur système d'exploitation de manière à privilégier les mouvements réduits lorsqu'ils interagissent avec les applications et les sites Web. Vous pouvez détecter cette préférence à l'aide de la requête mé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. Il est préférable de limiter les animations, en particulier les animations inattendues. Pour en savoir plus sur cette préférence et les performances globales, consultez notre guide d'animation.

Testez vos connaissances

Tester vos connaissances sur les animations