Animations

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

Les icônes clignotantes permettent de s'assurer que vos utilisateurs faites attention aux informations importantes.

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">
</ph> États de l&#39;animation de pulsation sur une période d&#39;une seconde
États de l'animation clignotante.

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">
</ph> Le même schéma qu&#39;avant, mais cette fois, avec des images clés
Animation clignotante avec des images clés.

@keyframes

Navigateurs pris en charge

  • Chrome: 43 <ph type="x-smartling-placeholder">
  • Edge: 12 <ph type="x-smartling-placeholder">
  • Firefox: 16 <ph type="x-smartling-placeholder">
  • Safari: 9. <ph type="x-smartling-placeholder">

Source

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;
  }
}
Essayez de modifier la règle pulse pour voir comment l'animation des modifications.

Propriétés animation

Navigateurs pris en charge

  • Chrome: 43 <ph type="x-smartling-placeholder">
  • Edge: 12 <ph type="x-smartling-placeholder">
  • Firefox: 16 <ph type="x-smartling-placeholder">
  • Safari: 9. <ph type="x-smartling-placeholder">

Source

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

  • Chrome: 43 <ph type="x-smartling-placeholder">
  • Edge: 12 <ph type="x-smartling-placeholder">
  • Firefox: 16 <ph type="x-smartling-placeholder">
  • Safari: 9. <ph type="x-smartling-placeholder">

Source

.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

  • Chrome: 43 <ph type="x-smartling-placeholder">
  • Edge: 12 <ph type="x-smartling-placeholder">
  • Firefox: 16 <ph type="x-smartling-placeholder">
  • Safari: 9. <ph type="x-smartling-placeholder">

Source

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;
}
Essayez de modifier la durée de l'animation. utilisations.

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">
</ph> Courbe de Bézier sur un graphique de progression par rapport au temps
Exemple de courbe de Bézier

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.

Comparez les animations avec et sans étapes.

animation-iteration-count

Navigateurs pris en charge

  • Chrome: 43 <ph type="x-smartling-placeholder">
  • Edge: 12 <ph type="x-smartling-placeholder">
  • Firefox: 16 <ph type="x-smartling-placeholder">
  • Safari: 9. <ph type="x-smartling-placeholder">

Source

.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.

Essayez de modifier le nombre d'itérations de cette animation.

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.

L'animation clignotante se répète indéfiniment.

animation-direction

Navigateurs pris en charge

  • Chrome: 43 <ph type="x-smartling-placeholder">
  • Edge: 12 <ph type="x-smartling-placeholder">
  • Firefox: 16 <ph type="x-smartling-placeholder">
  • Safari: 9. <ph type="x-smartling-placeholder">

Source

.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.
Essayez de changer la direction de l'animation.

animation-delay

Navigateurs pris en charge

  • Chrome: 43 <ph type="x-smartling-placeholder">
  • Edge: 12 <ph type="x-smartling-placeholder">
  • Firefox: 16 <ph type="x-smartling-placeholder">
  • Safari: 9. <ph type="x-smartling-placeholder">

Source

.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.

Essayez de modifier le délai de l'animation.

animation-play-state

Navigateurs pris en charge

  • Chrome: 43 <ph type="x-smartling-placeholder">
  • Edge: 12 <ph type="x-smartling-placeholder">
  • Firefox: 16 <ph type="x-smartling-placeholder">
  • Safari: 9. <ph type="x-smartling-placeholder">

Source

.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.

Placez le curseur de la souris sur l'élément animé pour mettre l'animation en pause.

animation-fill-mode

Navigateurs pris en charge

  • Chrome: 43 <ph type="x-smartling-placeholder">
  • Edge: 12 <ph type="x-smartling-placeholder">
  • Firefox: 16 <ph type="x-smartling-placeholder">
  • Safari: 9. <ph type="x-smartling-placeholder">

Source

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.
Essayez de modifier le mode de remplissage.

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:

  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 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.

Essayez un exemple d'animation réduite.

Testez 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 1
0% et 100%.
start et end.

Le animation-timing-function est également communément appelé:

Accélération
Chronologie dynamique
Délai

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

3
4
1
2