The CSS Podcast - 022: Animation
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.
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.
@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);
}
}
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
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 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
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.
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
.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
.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
: commealternate
, mais l'animation commence avec la chronologie en marche arrière.
animation-delay
.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
.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
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:
animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
animation-fill-mode
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 ?
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é:
Quel est le nombre minimal d'images clés requis dans une animation @keyframes
?