L'animation est un excellent moyen de mettre en évidence les éléments interactifs et d'ajouter de l'intérêt et du plaisir à vos conceptions. Dans ce module, vous allez découvrir 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 cette section particulière lorsque l'utilisateur clique dessus. Elles sont souvent accompagnées d'une animation clignotante qui vous indique subtilement que les informations s'y trouvent et qu'elles doivent faire l'objet d'une interaction. Mais comment procéder avec CSS ?
En CSS, vous pouvez créer ce type d'animation à l'aide d'animations CSS, qui vous permettent de définir une séquence d'animation à l'aide d'images clés. Il peut s'agir d'animations simples à un état ou même de séquences temporelles complexes.
Qu'est-ce qu'une image clé ?
Dans les logiciels d'animation, CSS et la plupart des autres outils permettant d'animer un élément, les images clés constituent le mécanisme utilisé pour attribuer des états d'animation aux codes temporels, le long d'une timeline.
Utilisons le « pulseur » comme contexte pour cela. L'animation complète dure une seconde et passe par deux états.
Il existe un point spécifique où chacun de ces états d'animation commence et se termine. Vous les cartographiez sur la timeline à l'aide d'images clés.
@keyframes
Maintenant que vous savez ce qu'est une image clé, ces connaissances devraient vous aider à comprendre le fonctionnement de la règle @keyframes CSS.
Voici une règle de base comportant deux états.
@keyframes my-animation {
from {
transform: translateY(20px);
}
to {
transform: translateY(0px);
}
}
La première partie à noter est l'identifiant personnalisé (identifiant personnalisé) ou, en termes plus humain, il s'agit du nom de la règle relative aux images clés.
L'identifiant de cette règle est my-animation.
L'identifiant personnalisé fonctionne comme un nom de fonction. Comme vous l'avez appris dans le module "Functions" (Fonctions), vous pouvez faire référence à la règle relative aux images clés 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 positions que vous le souhaitez sur la période. Dans le contexte de l'exemple "pulseur", il existe deux états, qui se traduisent par deux images clés. Cela signifie que vous disposez de deux positions dans votre règle relative aux images clés pour représenter les modifications pour chacune de ces images.
@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, définissez différentes propriétés d'animation ou utilisez 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. Il doit s'agir 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 sera trop rapide pour vous.
Vous ne pouvez pas ajouter de valeurs temporelles négatives.
animation-timing-function
Pour 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, ce qui permet à l'animation de s'exécuter à des vitesses variables au cours de animation-duration. Si une valeur est calculée au-delà de celle définie dans @keyframes, l'élément semble rebondir.
Plusieurs mots clés sont disponibles en tant que préréglages en CSS, qui 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 semblent être incurvées avec les fonctions de lissage de vitesse, car le lissage de vitesse est calculé à l'aide d'une courbe de bézier, qui est utilisée 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 directement une courbe de Bézier à 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é, et des outils visuels, tels que ce générateur de Lea Verou, sont très utiles.
Fonction de lissage de vitesse steps
Parfois, vous pouvez avoir besoin d'un contrôle plus précis de votre animation. Au lieu de vous déplacer le long d'une courbe, vous préférez utiliser des intervalles.
La fonction de lissage de vitesse steps() vous permet de diviser la chronologie en intervalles égaux.
.my-element {
animation-timing-function: steps(10, end);
}
Le premier argument est le nombre d'étapes. Si les étapes sont définies sur 10 et qu'il y a 10 images clés, chaque image clé est lue en séquence pendant la durée exacte, sans transition entre les états. Si le nombre d'images clés est insuffisant pour les étapes, des étapes entre les images clés sont ajoutées 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 la chronologie.
Si la valeur est start, la première étape de votre animation se termine dès qu'elle commence, 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 d'exécutions de la chronologie @keyframes.
La valeur par défaut est 1, ce qui signifie que lorsque l'animation atteint la fin de la timeline, elle s'arrête.
Le nombre ne peut pas être négatif.
Vous pouvez utiliser le mot clé infinite pour lire en boucle votre animation. C'est ainsi que fonctionne la démo "pulser" 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 à l'aide d'animation-direction:
normal: valeur par défaut, qui correspond aux transferts.reverse: s'exécute en sens inverse dans la chronologie.alternate: pour chaque itération de l'animation, la timeline s'exécute en avant ou en arrière dans l'ordre.alternate-reverse: l'inverse dealternate.
animation-delay
.my-element {
animation-delay: 5s;
}
La propriété animation-delay définit la durée d'attente avant de lancer l'animation.
Comme la propriété animation-duration, cela accepte une valeur temporelle.
Contrairement à la propriété animation-duration, vous pouvez la définir comme une valeur négative.
Si vous définissez une valeur négative, la timeline de votre @keyframes commencera à ce point.
Par exemple, si votre animation dure 10 secondes et que vous définissez animation-delay sur -5s, elle commence à mi-chemin de la timeline.
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 est mise en pause.
animation-fill-mode
La propriété animation-fill-mode définit quelles valeurs de la timeline @keyframes sont conservées avant ou après le début de l'animation.
La valeur par défaut est none, ce qui signifie que lorsque l'animation est terminée, les valeurs de la timeline sont supprimées.
Voici les autres formats proposés :
forwards: la dernière image clé est conservée, en fonction de la direction de l'animation.backwards: la première image clé est conservée, en fonction de la direction de l'animation.both: respecte les règles pourforwardsetbackwards.
Le raccourci animation
Au lieu de définir toutes les propriétés séparément, vous pouvez les définir à l'aide d'un raccourci animation, qui vous permet de définir les propriétés de l'animation dans l'ordre suivant:
animation-nameanimation-durationanimation-timing-functionanimation-delayanimation-iteration-countanimation-directionanimation-fill-modeanimation-play-state
.my-element {
animation: my-animation 10s ease-in-out 1s infinite forwards forwards running;
}
Remarques concernant l'utilisation d'animations
Dans leur système d'exploitation, les utilisateurs peuvent définir qu'ils préfèrent réduire les mouvements détectés lorsqu'ils interagissent avec les applications et les sites Web. Cette préférence peut être détectée à l'aide de la requête multimédia refers-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, mais plutôt pour réduire les animations, en particulier celles qui sont inattendues. Pour en savoir plus sur cette préférence et les performances globales, consultez ce guide d'animation.
Testez vos connaissances
Tester vos connaissances sur les animations
Le nom ou l'identifiant personnalisé d'une animation @keyframes est-il sensible à la casse ?
SWOOP et swoop peuvent coexister.Les mots clés from et to sont identiques à
start, end.0%, 100%.from équivaut à 0% et to équivaut à 100%.0 et 1animation-timing-function est également connu sous le nom de
Quel est le nombre minimal d'images clés requis dans une animation @keyframes ?