L'animation est un excellent moyen de mettre en évidence les éléments interactifs et d'ajouter de l'intérêt et amusante à vos conceptions. Dans ce module, vous allez apprendre à ajouter des effets d'animation CSS.
Parfois, vous voyez de petites aides sur des interfaces qui fournissent des sur la section dans laquelle ils se trouvent lorsque vous cliquez dessus. Ceux-ci ont souvent un une animation clignotante pour vous indiquer subtilement que l'information est là et doit faire l'objet d'une interaction. Ce module vous montre comment créer ces assistants et d'autres animations à l'aide de CSS
Vous pouvez utiliser le code CSS pour définir une séquence d'animation avec des images clés. Ces séquences Il peut s'agir d'animations de base à un état ou de 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 vous permettent d'attribuer une animation aux horodatages sur une chronologie.
Par exemple, voici une chronologie pour l'affichage clignotant du mot "helper" un point. L'animation s'exécute pendant 1 seconde et comporte deux états.
<ph type="x-smartling-placeholder">Il existe un point spécifique où chacun de ces états d'animation commence et finit. Vous les cartographiez sur la timeline à l'aide d'images clés.
<ph type="x-smartling-placeholder">@keyframes
Navigateurs pris en charge
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
CSS @keyframes
reposent sur le même concept
que les images clés de l'animation.
Voici un exemple avec deux états:
@keyframes my-animation {
from {
transform: translateY(20px);
}
to {
transform: translateY(0px);
}
}
La première partie importante est
identifiant personnalisé (custom-ident
),
le nom de la règle liée aux 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 faire référence à la règle liée aux images clés ailleurs dans votre code CSS.
Dans la règle concernant les 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 ceci:
@keyframes my-animation {
0% {
transform: translateY(20px);
}
100% {
transform: translateY(0px);
}
}
Vous pouvez ajouter autant de positions que vous le souhaitez pendant la période. Dans l'exemple de l'assistant clignotant, deux états se traduisent par deux et des images clés. Ainsi, votre règle d'images clés comporte deux positions 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
Navigateurs pris en charge
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
Pour utiliser votre @keyframes
dans une règle CSS, vous pouvez définir différentes animations
individuellement, ou utilisez la propriété animation
.
animation-duration
Navigateurs pris en charge
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
.my-element {
animation-duration: 10s;
}
animation-duration
définit la durée de la chronologie @keyframes
sous forme de valeur temporelle.
La valeur par défaut est 0 seconde, ce qui signifie que l'animation continue
rapide à voir. Vous ne pouvez pas utiliser de valeurs temporelles négatives.
animation-timing-function
Navigateurs pris en charge
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
Pour recréer un mouvement naturel dans une animation, vous pouvez utiliser des fonctions de minutage qui
calculer la vitesse d'une animation à chaque point. Les valeurs calculées sont souvent
incurvée, ce qui fait que l'animation s'exécute à des vitesses variables pendant
animation-duration
, et faire en sorte que 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 servent de 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 de lissage de vitesse semblent être courbées, car le lissage de vitesse est calculé à l'aide d'une
Courbe de Bézier : type de fonction utilisée pour modéliser la vitesse. Chacun des codes temporels
Les mots clés de fonction, tels que ease
, font référence à une courbe de Bézier prédéfinie. Dans 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
, 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.
<ph type="x-smartling-placeholder">Comprendre les courbes de Bézier est compliqué. Les outils visuels, comme celui-ci, générateur de Lea Verou, sont très utiles.
La fonction de lissage de vitesse steps
Parfois, vous voudrez peut-être prendre
un contrôle plus précis de votre animation en
en se déplaçant en intervalles
plutôt que le long d'une courbe. La fonction de lissage de vitesse steps()
permet
vous décomposez la chronologie en intervalles définis de durée égale.
.my-element {
animation-timing-function: steps(10, end);
}
Le premier argument est le nombre d'étapes. Si le même nombre de comme des étapes, chaque image clé est lue à la suite pendant la durée exacte sans passer d'un état à un autre. S'il y a moins d'images clés que d'étapes, le navigateur ajoute des étapes entre en fonction du deuxième argument.
Le deuxième argument est la direction. Si elle est définie sur end
,
par défaut, les étapes se terminent à la fin de la 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 avant end
.
animation-iteration-count
Navigateurs pris en charge
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
.my-element {
animation-iteration-count: 10;
}
animation-iteration-count
définit le nombre de fois que la chronologie @keyframes
doit s'exécuter au cours de la
de l'animation. La valeur par défaut est 1, ce qui signifie que l'animation s'arrête lorsqu'elle
atteint la fin de votre chronologie. 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
. Voici comment
l'animation clignotante au début
de cette leçon fonctionne.
animation-direction
Navigateurs pris en charge
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
.my-element {
animation-direction: reverse;
}
Vous pouvez définir le sens dans lequel la timeline s'exécute sur vos images clés à l'aide de animation-direction, qui accepte les valeurs suivantes:
normal
: valeur par défaut, c'est-à-dire avant.reverse
: revient en arrière sur la chronologie.alternate
: pour chaque itération de l'animation, la timeline alterne entre avancer et courir en arrière.alternate-reverse
: semblable àalternate
, mais l'animation commence par le chronologie en arrière.
animation-delay
Navigateurs pris en charge
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
.my-element {
animation-delay: 5s;
}
animation-delay
définit le délai d'attente du navigateur avant de lancer l'animation.
Comme pour la propriété animation-duration
, elle prend une valeur de temps.
Contrairement à animation-duration
, vous pouvez définir animation-delay
comme une valeur négative
pour que l'animation démarre au point correspondant
calendrier. Par exemple, si votre animation dure 10 secondes et que vous définissez
animation-delay
à -5s
, l'animation commence à la moitié
calendrier.
animation-play-state
Navigateurs pris en charge
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
.my-element:hover {
animation-play-state: paused;
}
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
Navigateurs pris en charge
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
animation-fill-mode
définit les valeurs de la chronologie @keyframes
qui sont conservées avant que
commence ou se termine. La valeur par défaut est none
, ce qui signifie que
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 dans la direction de l'animation.backwards
: la première image clé persiste dans la direction de l'animation.both
: les première et dernière images clés sont conservées.
Le raccourci animation
Au lieu de définir chaque propriété séparément, vous pouvez les définir dans une
Raccourci animation
, qui vous permet de définir les propriétés de l'animation dans
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 des animations
Les utilisateurs peuvent configurer leur système d'exploitation pour préférer 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 l'opérateur prefers-reduced-motion requête média:
@media (prefers-reduced-motion) {
.my-autoplaying-animation {
animation-play-state: paused;
}
}
Il ne s'agit pas nécessairement d'une préférence pour ne pas avoir d'animation. Il s'agit d'une préférence pour et en particulier moins d'animations inattendues. Pour en savoir plus sur cette préférence et les performances globales 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 ?
Les mots clés from
et to
sont identiques à:
start
et end
.0%
et 100%
.0
et 1
Le animation-timing-function
est également communément appelé:
Quel est le nombre minimal d'images clés requises dans une animation @keyframes
?