Propriété CSS animation

La propriété animation est utilisée pour animer (modifier progressivement d’un style à un autre) les propriétés CSS à valeurs continues : les propriétés de mise en page (border, height, width, etc.), les propriétés définissant la position (left, top), les tailles de police, les couleurs et les opacités.

La propriété animation fait partie des propriétés CSS3.

Les anciens navigateurs peuvent nécessiter le préfixe -webkit- pour une prise en charge plus ancienne.

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 une animation, vous devez d’abord spécifier ce qui doit se passer à des moments précis pendant l’animation. Cela est défini avec la règle @keyframes.

La règle @keyframes se compose du mot-clé « @keyframes » suivi de 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.

Entre accolades, on place des sélecteurs de keyframes, qui définissent les keyframes (ou points de passage) dans la séquence d’animation, lorsque les styles doivent être modifiés. 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

html

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

Try it Yourself »

Dans cet exemple, nous associons 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> de « vert » à « gris ».

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

Animation est la propriété raccourcie utilisée pour définir toutes les propriétés d’animation en une seule déclaration. Nous listons ci-dessous toutes les propriétés standard liées à l’animation.

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

Exemple d’animation avec certaines propriétés liées à l’animation :

Exemple d’animation avec certaines propriétés liées à l’animation :

css

@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;
}

Animation-name

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

Syntaxe de la propriété animation-name

css

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

Exemple de la propriété animation-name :

Exemple de la propriété animation-name

html

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

Try it Yourself »

Animation-duration

Elle définit la durée (en secondes ou en millisecondes) nécessaire à l’animation pour effectuer 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

css

animation-duration: time | initial | inherit

Exemple de la propriété animation-duration :

Exemple de la propriété animation-duration

html

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

Try it Yourself »

Animation-timing-function

Cette propriété définit la manière dont une animation progresse pendant la durée de chaque cycle — et non sur l’ensemble de l’animation.

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

css

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 » :

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

html

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

Try it Yourself »

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

css

animation-delay: time | initial | inherit

Exemple de la propriété animation-delay :

Exemple de la propriété CSS animation-delay

html

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

Try it Yourself »

Animation-direction

Elle définit si l’animation doit être jouée en sens inverse lors des cycles alternés ou non.

Syntaxe de la propriété animation-direction

css

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 vers l’avant (keyframes 0 % - 100 %)
reverse — l’animation est jouée à l’envers (keyframes 100 % - 0 %)
alternate — l’animation est jouée vers l’avant, puis inversée et répétée.
alternate-reverse — l’animation est jouée à l’envers puis vers l’avant.

Exemple de la propriété animation-direction :

Exemple de la propriété animation-direction :

html

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

Try it Yourself »

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 toute valeur entière positive peut être définie. Si vous définissez le mot-clé infinite, l’animation sera jouée indéfiniment.

WARNING

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

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

css

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

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

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

html

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

Try it Yourself »

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

css

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 keyframe (cela dépend des propriétés animation-iteration-count et animation-direction).
backwards - spécifie que l’élément doit recevoir les valeurs de style définies par la première keyframe (cela 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 de forwards et de 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 » :

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

html

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

Try it Yourself »

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

css

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 » :

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

html

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

Try it Yourself »

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 d’animations multiples sur un sélecteur :

Exemple de la propriété Animation avec plusieurs animations

html

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

Try it Yourself »

Practice

Les affirmations suivantes concernant l’animation CSS sont-elles vraies ?

CSS permet d’animer des éléments HTML sans utiliser JavaScript.La propriété animation en CSS est une propriété raccourcie pour plusieurs propriétés d’animation, telles que : animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction.En animation CSS, la règle @keyframes est utilisée pour définir l’animation.L’effet d’animation ne se produit que si le nom de l’animation n’est pas spécifié.Les propriétés d’animation CSS doivent être appliquées directement aux éléments HTML.

Propriété CSS animation ​

La règle @keyframes ​

Exemple d’animation avec la règle @keyframe : ​

Propriétés liées à l’animation ​

Exemple d’animation avec certaines propriétés liées à l’animation : ​

Animation-name ​

Exemple de la propriété animation-name : ​

Animation-duration ​

Exemple de la propriété animation-duration : ​

Animation-timing-function ​

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

Animation-delay ​

Exemple de la propriété animation-delay : ​

Animation-direction ​

Exemple de la propriété animation-direction : ​

Animation-iteration-count ​

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

Animation-fill-mode ​

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

Animation-play-state ​

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

Animations multiples ​

Exemple d’animations multiples sur un sélecteur : ​

Practice ​

Propriété CSS animation

La règle @keyframes

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

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

Exemple d’animation avec certaines propriétés liées à l’animation :

Animation-name

Exemple de la propriété animation-name :

Animation-duration

Exemple de la propriété animation-duration :

Animation-timing-function

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

Animation-delay

Exemple de la propriété animation-delay :

Animation-direction

Exemple de la propriété animation-direction :

Animation-iteration-count

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

Animation-fill-mode

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

Animation-play-state

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

Animations multiples

Exemple d’animations multiples sur un sélecteur :

Practice