W3docs
fr
Se connecter

Propriété CSS animation

Apprenez la propriété CSS animation pour animer progressivement des éléments HTML sans JavaScript. Exemples inclus.

La propriété CSS animation vous permet d'animer des éléments — en modifiant progressivement une ou plusieurs valeurs CSS dans le temps — sans aucun JavaScript. Elle fonctionne sur les propriétés dont les valeurs peuvent être interpolées, telles que les dimensions de mise en page (border, height, width), la position (left, top), la taille de police, la couleur et l'opacité.

Cette page couvre la propriété raccourcie animation, les huit propriétés longues animation-* individuelles, la règle @keyframes qui les pilote, comment exécuter plusieurs animations simultanément, et comment respecter les préférences des utilisateurs souhaitant réduire les mouvements. animation est l'une des propriétés CSS3.

Une animation est constituée de deux parties : une règle @keyframes qui décrit à quoi ressemble l'élément à des points précis de la chronologie, et la propriété animation (ou ses formes longues) sur l'élément qui indique comment lire cette chronologie — durée, nombre de répétitions, direction, etc.

Les navigateurs anciens peuvent nécessiter le préfixe -webkit- pour une compatibilité étendue.

Info

Les propriétés qui utilisent un mot-clé comme valeur, telles que display: none; ou visibility: hidden;, ne peuvent pas être animées. Les propriétés avec des valeurs telles que height: auto; ne peuvent pas non plus être animées.

La règle @keyframes

Pour utiliser l'animation, vous devez d'abord spécifier ce qui doit se passer à des moments précis durant l'animation. Cela est défini avec la règle @keyframes.

La règle @keyframes est constituée du mot-clé « @keyframes » suivi du nom de l'animation (animation-name), qui identifie l'animation. L'animation est ensuite appliquée à un élément en utilisant cet identifiant comme valeur de la propriété animation-name.

Dans les accolades, on place des sélecteurs de keyframe qui définissent les images clés (ou points de passage) dans la séquence d'animation où les styles doivent changer. Le sélecteur de keyframe peut commencer par un pourcentage (%) ou par les mots-clés « from » (équivalent à 0%) et « to » (équivalent à 100%). 0% est le point de départ de l'animation, 100% est le point d'arrivée.

Exemple d'animation avec la règle @keyframe :

Exemple de la propriété animation avec @keyframes

<!DOCTYPE html>
<html>
  <head>
    <style>
      .element {
        padding: 50px;
        animation: pulse 4s infinite;
      }
      @keyframes pulse {
        0% {
          background-color: #8ebf42;
        }
        50% {
          background-color: #1c87c9;
        }
        100% {
          background-color: #d5dce8;
        }
      }
    </style>
  </head>
  <body>
    <div class="element">Background of this text is animated using CSS3 animation property.</div>
  </body>
</html>
Essayez vous-même »

Dans cet exemple, nous appliquons l'animation à l'élément <div>. L'animation durera 4 secondes et modifiera progressivement la couleur d'arrière-plan de l'élément <div> du vert au gris.

Propriétés liées à l'animation

animation est la propriété raccourcie permettant de définir toutes les propriétés d'animation individuelles en une seule déclaration. Les formes longues standard sont résumées ci-dessous.

PropriétéDéfinitValeurs courantes
animation-nameLa règle @keyframes à jouerun nom, none
animation-durationLa durée d'un cycle2s, 500ms (par défaut 0s — pas d'animation)
animation-timing-functionLa courbe de vitesse dans chaque cycleease, linear, ease-in-out, cubic-bezier(…)
animation-delayAttente avant le démarrage1s, -2s (négatif : démarre en milieu d'animation)
animation-iteration-countNombre de répétitionsun nombre, infinite
animation-directionEn avant, en arrière ou aller-retournormal, reverse, alternate
animation-fill-modeStyles avant/après l'exécutionnone, forwards, backwards, both
animation-play-stateEn cours ou en pauserunning, paused

Voyons maintenant les propriétés liées à l'animation en action.

Exemple d'animation avec quelques propriétés d'animation :

@keyframes pulse {
  /* declare animation actions here */
}

.element {
  animation-name: pulse;
  animation-duration: 3.5s;
  animation-timing-function: ease-in;
  animation-delay: 1s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-fill-mode: none;
  animation-play-state: running;
}

/*
  The same can be declared using the animation shorthand property 
*/

.element {
  animation: pulse 3.5s ease-in 1s alternate infinite none running;
}

L'ordre des valeurs dans la propriété raccourcie est globalement flexible, avec deux règles à retenir : le nom doit être présent, et lorsqu'une durée et un délai sont tous les deux spécifiés, la première valeur de temps est la durée et la seconde est le délai. Toute valeur omise revient à sa valeur par défaut (par exemple, omettre animation-iteration-count joue l'animation une seule fois).

Animation-name

Cette propriété définit le nom de la règle @keyframes à appliquer.

Syntaxe de la propriété animation-name

animation-name: keyframe-name | none | initial | inherit

Exemple de la propriété animation-name :

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        padding: 50px;
        animation: element 4s infinite;
      }
      @keyframes element {
        0% {
          background-color: #8ebf42;
        }
        50% {
          background-color: #1c87c9;
        }
        100% {
          background-color: #d5dce8;
        }
      }
    </style>
  </head>
  <body>
    <h2>Animation-name example</h2>
    <div>The name of the animation is set as "element".</div>
  </body>
</html>
Essayez vous-même »

Animation-duration

Cette propriété définit la durée (en secondes ou en millisecondes) nécessaire à l'animation pour accomplir un cycle complet. Si cette propriété n'est pas spécifiée, l'animation ne se produira pas.

Syntaxe de la propriété animation-duration

animation-duration: time | initial | inherit

Exemple de la propriété animation-duration :

<!DOCTYPE html>
<html>
  <head>
    <style>
      .element {
        padding: 50px;
        animation: pulse 7s infinite;
      }
      @keyframes pulse {
        0% {
          background-color: #8ebf42;
        }
        50% {
          background-color: #1c87c9;
        }
        100% {
          background-color: #eee
        }
      }
    </style>
  </head>
  <body>
    <div class="element">Background of this text is animated using CSS3 animation property</div>
  </body>
</html>
Essayez vous-même »

Animation-timing-function

Cette propriété définit comment une animation progressera sur la durée de chaque cycle — et non sur l'ensemble de l'animation.

Syntaxe de la propriété animation-timing-function

animation-timing-function: linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n,n,n,n) | initial | inherit

Exemple de la propriété animation-timing-function avec la valeur « ease » :

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      div {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background: #1c87c9;
        position: relative;
        -webkit-animation: element 5s infinite;
        /* Safari 4.0 - 8.0 */
        -webkit-animation-timing-function: ease;
        /* Safari 4.0 - 8.0 */
        animation: element 5s infinite;
        animation-timing-function: ease;
      }
      /* Safari 4.0 - 8.0 */
      @-webkit-keyframes element {
        from {
          left: 0px;
        }
        to {
          left: 200px;
        }
      }
      @keyframes element {
        from {
          left: 0px;
        }
        to {
          left: 200px;
        }
      }
    </style>
  </head>
  <body>
    <h2>Animation-timing-function example</h2>
    <div></div>
  </body>
</html>
Essayez vous-même »

Animation-delay

Cette propriété définit le délai (en secondes ou en millisecondes) entre le chargement de l'élément et le début de l'animation.

Syntaxe de la propriété animation-delay

animation-delay: time | initial | inherit

Exemple de la propriété animation-delay :

Exemple de la propriété CSS animation-delay

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 120px;
        height: 120px;
        background: #1c87c9;
        position: relative;
        animation: delay 5s infinite;
        animation-delay: 3s;
      }
      @keyframes delay {
        from {
          left: 0px;
        }
        to {
          left: 300px;
        }
      }
    </style>
  </head>
  <body>
    <h2>Animation-delay example</h2>
    <p>Here the animation starts after 3 seconds.</p>
    <div></div>
  </body>
</html>
Essayez vous-même »

Animation-direction

Cette propriété définit si l'animation doit être jouée en sens inverse lors des cycles alternés.

Syntaxe de la propriété animation-direction

animation-direction: normal | reverse | alternate | alternate-reverse | initial | inherit

Les valeurs suivantes peuvent être appliquées :

  • normal — (par défaut) l'animation est jouée en avant (keyframes 0% - 100%)
  • reverse — l'animation est jouée en arrière (keyframes 100% - 0%)
  • alternate — l'animation est jouée en avant, puis inversée et répétée.
  • alternate-reverse — l'animation est jouée en arrière, puis en avant.

Exemple de la propriété animation-direction :

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 120px;
        height: 120px;
        background: #ccc;
        position: relative;
        animation: myfirst 5s 1;
        animation-direction: normal;
      }
      @keyframes myfirst {
        0% {
          background: #8DC3CF;
          left: 0px;
          top: 0px;
        }
        25% {
          background: #1c87c9;
          left: 200px;
          top: 0px;
        }
        50% {
          background: #030E10;
          left: 200px;
          top: 200px;
        }
        75% {
          background: #666;
          left: 0px;
          top: 200px;
        }
        100% {
          background: #8ebf42;
          left: 0px;
          top: 0px;
        }
      }
    </style>
  </head>
  <body>
    <h2>Animation-direction example</h2>
    <p>Here the animation plays forwards.</p>
    <div></div>
  </body>
</html>
Essayez vous-même »

Animation-iteration-count

Définit le nombre de fois qu'un cycle d'animation doit être joué avant de s'arrêter. La valeur par défaut est un, mais tout entier positif peut être défini. Si vous définissez le mot-clé infinite, l'animation sera jouée indéfiniment.

Avertissement

Un entier nul ou négatif ne lancera jamais l'animation.

Syntaxe de la propriété animation-iteration-count

animation-iteration-count: number | infinite | initial | inherit

Exemple de la propriété animation-iteration-count :

Exemple de la propriété CSS animation-iteration-count :

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      html,
      body {
        margin: 0;
        padding: 0;
      }
      div {
        position: relative;
        width: 100px;
        height: 100px;
        margin: 30px 0;
        border-radius: 50%;
        animation-name: pulse;
      }
      .element-one {
        background-color: #1c87c9;
        animation-duration: 3s;
        animation-iteration-count: 3;
      }
      .element-two {
        margin: 0;
        background-color: #83bf42;
        animation-duration: 5s;
        animation-iteration-count: 2;
      }
      @keyframes pulse {
        0% {
          left: 0;
        }
        50% {
          left: 50%;
        }
        100% {
          left: 0;
        }
      }
    </style>
  </head>
  <body>
    <h2>The animation-iteration-count example</h2>
    <p>The animation-iteration-count sets the number of times an animation cycle should be played before stopping.</p>
    <div class="element-one"></div>
    <div class="element-two"></div>
  </body>
</html>
Essayez vous-même »

Animation-fill-mode

Cette propriété spécifie un style pour l'élément appliqué avant ou après l'exécution de l'animation.

Syntaxe de la propriété animation-fill-mode

animation-fill-mode: none | forwards | backwards | both | initial | inherit

Elle peut prendre les valeurs suivantes :

  • forwards - spécifie que l'élément doit conserver les valeurs de style définies par la dernière image clé (dépend des propriétés animation-iteration-count et animation-direction).
  • backwards - spécifie que l'élément doit obtenir les valeurs de style définies par la première image clé (dépend de animation-direction) et les conserver pendant la période animation-delay.
  • both - spécifie que l'animation doit suivre les règles pour forwards et backwards.
  • none - (par défaut) spécifie qu'aucun style ne sera appliqué à l'élément avant ou après l'exécution de l'animation.

Exemple de la propriété animation-fill-mode avec la valeur « forwards » :

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 100px;
        height: 100px;
        background: #1c87c9;
        position: relative;
        -webkit-animation: element 5s;
        /* Safari 4.0 - 8.0 */
        -webkit-animation-fill-mode: forwards;
        /* Safari 4.0 - 8.0 */
        animation: element 5s;
        animation-fill-mode: forwards;
      }
      /* Safari 4.0 - 8.0 */
      @-webkit-keyframes element {
        from {
          top: 0px;
        }
        to {
          top: 200px;
          background-color: blue;
        }
      }
      @keyframes element {
        from {
          top: 0px;
        }
        to {
          top: 200px;
          background-color: #8ebf42;
        }
      }
    </style>
  </head>
  <body>
    <h2>Animation-fill-mode example</h2>
    <div></div>
  </body>
</html>
Essayez vous-même »

Animation-play-state

Cette propriété spécifie si l'animation est en cours de lecture ou en pause.

Syntaxe de la propriété animation-play-state

animation-play-state: paused | running | initial | inherit

La valeur par défaut est running.

Exemple de la propriété animation-play-state avec la valeur « running » :

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 150px;
        height: 150px;
        background: #ccc;
        position: relative;
        animation: play 10s;
        animation-play-state: running;
      }
      @keyframes play {
        from {
          left: 0px;
        }
        to {
          left: 200px;
        }
      }
    </style>
  </head>
  <body>
    <h2>Animation-play-state example</h2>
    <p>Here the animation-play-state is set to "running".</p>
    <div></div>
  </body>
</html>
Essayez vous-même »

Animations multiples

Il est possible de déclarer plusieurs animations sur un sélecteur ; il suffit de séparer les valeurs par des virgules.

Exemple de plusieurs animations sur un sélecteur :

Exemple de la propriété animation avec des animations multiples

<!DOCTYPE html>
<html>
  <head>
    <style>
      html,
      body {
        height: 100%;
        margin: 0;
      }
      body {
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .element {
        height: 200px;
        width: 200px;
        background-color: #1c87c9;
        animation: pulse 5s ease infinite alternate, nudge 5s linear infinite alternate;
      }
      @keyframes pulse {
        0%,
        100% {
          background-color: #8ebf42;
        }
        50% {
          background-color: #1c87c9;
        }
      }
      @keyframes nudge {
        0%,
        100% {
          transform: translate(0, 0);
        }
        50% {
          transform: translate(150px, 0);
        }
        80% {
          transform: translate(-150px, 0);
        }
      }
    </style>
  </head>
  <body>
    <div class="element"></div>
  </body>
</html>
Essayez vous-même »

Respect des préférences de mouvement réduit

Les mouvements importants ou constants peuvent provoquer des nausées, des vertiges ou des migraines chez certains utilisateurs. Les systèmes d'exploitation exposent un paramètre « réduire les mouvements » que vous pouvez respecter grâce à la media query prefers-reduced-motion — en désactivant (ou en atténuant) les animations pour ces utilisateurs tout en les conservant pour les autres.

.element {
  animation: pulse 4s infinite;
}

@media (prefers-reduced-motion: reduce) {
  .element {
    animation: none;
  }
}

Il est recommandé d'encapsuler tout mouvement non essentiel dans cette requête afin que vos animations restent accessibles.

Erreurs courantes

  • Sans animation-duration, pas d'animation. La durée par défaut est 0s, donc les keyframes n'ont jamais l'occasion de s'exécuter.
  • Les valeurs de type mot-clé et auto ne s'animent pas. Comme indiqué ci-dessus, les propriétés telles que display, visibility et height: auto ne peuvent pas être interpolées. Animez opacity et transform à la place — ce sont aussi les propriétés les plus performantes à animer.
  • forwards ne persiste que si le nombre d'itérations est fini. animation-fill-mode: forwards maintient la dernière image clé après la fin de l'animation ; avec infinite, l'animation ne se termine jamais, il n'y a donc rien à maintenir.
  • L'ordre des valeurs de temps dans la propriété raccourcie est important. Le premier <time> est la durée, le second est le délai.

Propriétés associées

  • @keyframes — définit la chronologie de l'animation.
  • animation-name — choisit quelle règle @keyframes jouer.
  • transition — anime entre deux états lors d'un déclencheur tel que :hover.
  • transform — déplace, redimensionne et fait pivoter les éléments (idéal à animer).

Pratique

Pratique
Lesquelles des affirmations suivantes concernant l'animation CSS sont vraies ?
Lesquelles des affirmations suivantes concernant l'animation CSS sont vraies ?
Was this page helpful?