Cette page a été traduite à partir de l'anglais par la communauté.Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.

View in EnglishAlways switch to English

animation

Baseline Widely available *

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis ⁨septembre 2015⁩.

* Certaines parties de cette fonctionnalité peuvent bénéficier de prise en charge variables.

La propriétéanimation estune propriété raccourcie qui permet d'appliquer une animation entre des styles.

C'est une propriété qui synthétise les propriétés suivantes :

Exemple interactif

animation: 3s ease-in 1s infinite reverse both running slidein;

animation: 3s linear 1s infinite running slidein;

animation: 3s linear 1s infinite alternate slidein;

animation: 0.5s linear 1s infinite alternate slidein;

<section>  <div></div></section>

#example-element {  background-color: #1766aa;  margin: 20px;  border: 5px solid #333;  width: 150px;  height: 150px;  border-radius: 50%;}@keyframes slidein {  from {    margin-left: -20%;  }  to {    margin-left: 100%;  }}

css

/* @keyframes duration | timing-function | delay |   iteration-count | direction | fill-mode | play-state | name */animation: 3s ease-in 1s 2 reverse both paused slidein;/* @keyframes duration | timing-function | delay | name */animation: 3s linear 1s slidein;/* @keyframes duration | name */animation: 3s slidein;

Exemple d'animation

<div>  <div>    <div>      Avec l'animation suivante :      <pre>@keyframes slidein {  from { transform: scaleX(0); }  to   { transform: scaleX(1); }}</pre      >    </div>    <div>      <div>        <button title="LECTURE"></button>      </div>      <div>        <div>          animation: 3s ease-in 1s 2 reverse both paused slidein;        </div>        <div></div>      </div>    </div>    <div>      <div>        <button title="PAUSE"></button>      </div>      <div>        <div>animation: 3s linear 1s slidein;</div>        <div></div>      </div>    </div>    <div>      <div>        <button title="PAUSE"></button>      </div>      <div>        <div>animation: 3s slidein;</div>        <div></div>      </div>    </div>  </div></div>

html,body {  height: 100%;  box-sizing: border-box;}pre {  margin-bottom: 0;}svg {  width: 1.5em;  height: 1.5em;}button {  width: 27px;  height: 27px;  background-size: 16px;  background-position: center;  background-repeat: no-repeat;  border-radius: 3px;  cursor: pointer;}button.play {  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cstyle%3Epath%20%7Bdisplay%3Anone%7D%20path%3Atarget%7Bdisplay%3Ablock%7D%3C%2Fstyle%3E%3Cpath%20id%3D%22play%22%20d%3D%22M3%2C3%20L3%2C13%20L13%2C8%20Z%22%20%2F%3E%3Cpath%20id%3D%22pause%22%20d%3D%22M5%2C4%20L7%2C4%20L7%2C13%20L5%2C13%20Z%20M9%2C4%20L11%2C4%20L11%2C13%20L9%2C13%20Z%22%20%2F%3E%3Cpath%20id%3D%22restart%22%20d%3D%22M13%2C9%20A5%2C5%2C1%2C1%2C1%2C8%2C4%20L8%2C2%20L12%2C5%20L8%2C8%20L8%2C6%20A3%2C3%2C1%2C1%2C0%2C11%2C9%20A1%2C1%2C1%2C1%2C1%2C13%2C9%20z%22%20%2F%3E%3C%2Fsvg%3E#play");}button.pause {  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cstyle%3Epath%20%7Bdisplay%3Anone%7D%20path%3Atarget%7Bdisplay%3Ablock%7D%3C%2Fstyle%3E%3Cpath%20id%3D%22play%22%20d%3D%22M3%2C3%20L3%2C13%20L13%2C8%20Z%22%20%2F%3E%3Cpath%20id%3D%22pause%22%20d%3D%22M5%2C4%20L7%2C4%20L7%2C13%20L5%2C13%20Z%20M9%2C4%20L11%2C4%20L11%2C13%20L9%2C13%20Z%22%20%2F%3E%3Cpath%20id%3D%22restart%22%20d%3D%22M13%2C9%20A5%2C5%2C1%2C1%2C1%2C8%2C4%20L8%2C2%20L12%2C5%20L8%2C8%20L8%2C6%20A3%2C3%2C1%2C1%2C0%2C11%2C9%20A1%2C1%2C1%2C1%2C1%2C13%2C9%20z%22%20%2F%3E%3C%2Fsvg%3E#pause");}button.restart {  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cstyle%3Epath%20%7Bdisplay%3Anone%7D%20path%3Atarget%7Bdisplay%3Ablock%7D%3C%2Fstyle%3E%3Cpath%20id%3D%22play%22%20d%3D%22M3%2C3%20L3%2C13%20L13%2C8%20Z%22%20%2F%3E%3Cpath%20id%3D%22pause%22%20d%3D%22M5%2C4%20L7%2C4%20L7%2C13%20L5%2C13%20Z%20M9%2C4%20L11%2C4%20L11%2C13%20L9%2C13%20Z%22%20%2F%3E%3Cpath%20id%3D%22restart%22%20d%3D%22M13%2C9%20A5%2C5%2C1%2C1%2C1%2C8%2C4%20L8%2C2%20L12%2C5%20L8%2C8%20L8%2C6%20A3%2C3%2C1%2C1%2C0%2C11%2C9%20A1%2C1%2C1%2C1%2C1%2C13%2C9%20z%22%20%2F%3E%3C%2Fsvg%3E#restart");}.grid {  width: 100%;  height: 100%;  display: flex;  background: #eee;  font: 1em monospace;}.row {  display: flex;  flex: 1 auto;  flex-direction: row;  flex-wrap: wrap;  justify-content: space-between;}.col {  display: flex;  flex: 1 auto;  flex-direction: column;}.cell {  box-sizing: border-box;  margin: 0.5em;  padding: 0;  background-color: #fff;  overflow: hidden;  text-align: left;}.flx {  flex: 1 0;}.note {  background: #fff3d4;  padding: 1em;  margin: 0.5em;  font: 0.8em sans-serif;  text-align: left;  flex: none;}.overlay {  padding: 0.5em;}@keyframes slidein {  from {    transform: scaleX(0);  }  to {    transform: scaleX(1);  }}.a1 {  animation: 3s ease-in 1s 2 reverse both paused slidein;}.a2 {  animation: 3s linear 1s slidein;}.a3 {  animation: 3s slidein;}.animation {  background: #3f87a6;  width: 100%;  height: calc(100% - 1.5em);  transform-origin: left center;}

window.addEventListener("load", function () {  var ANIMATION = Array.from(document.querySelectorAll(".animation"));  var BUTTON = Array.from(document.querySelectorAll("button"));  function toggleButton(btn, type) {    btn.classList.remove("play", "pause", "restart");    btn.classList.add(type);    btn.title = type.toUpperCase(type);  }  function playPause(i) {    var btn = BUTTON[i];    var anim = ANIMATION[i];    if (btn.classList.contains("play")) {      anim.style.animationPlayState = "running";      toggleButton(btn, "pause");    } else if (btn.classList.contains("pause")) {      anim.style.animationPlayState = "paused";      toggleButton(btn, "play");    } else {      anim.classList.remove("a" + (i + 1));      setTimeout(function () {        toggleButton(btn, i === 0 ? "play" : "pause");        anim.style.animationPlayState = "";        anim.classList.add("a" + (i + 1));      }, 100);    }  }  ANIMATION.forEach(function (node, index) {    node.addEventListener("animationstart", function () {      toggleButton(BUTTON[index], "pause");    });    node.addEventListener("animationend", function () {      toggleButton(BUTTON[index], "restart");    });  });  BUTTON.forEach(function (btn, index) {    btn.addEventListener("click", function () {      playPause(index);    });  });});

Une liste des propriétés qui peuvent être animées est disponible. On notera que cette liste est également valable pourles transitions CSS.

Syntaxe

La propriétéanimation se définit grâce à une ou plusieurs animations, séparées par des virgules.

Chaque animation se définit comme :

zéro ou une valeur du type :
un nom optionnel pour l'animation ; celui-ci peut être le mot-clénone, un identifiant (<custom-ident>) ou une chaîne de caractères (<string>)
zéro, une ou deux valeurs de type<time>

L'ordre des valeurs est important : la première valeur qui peut être analysée comme une valeur de type<time> sera affectée àanimation-duration et la deuxième àanimation-delay.

L'ordre des valeurs est également important pour chaque définition d'animation afin d'identifier la valeur deanimation-name parmi les autres mots-clés. Lors de l'analyse de la déclaration, les mots-clés valides pour d'autres propriétés queanimation-name et dont les valeurs n'ont pas été trouvées avant doivent être affectés à ces différentes propriétés et non àanimation-name. De plus, lors de la sérialisation, les valeurs par défaut doivent être expliciter autant que nécessaire pour distinguer une valeur pouranimation-name qui pourrait être une valeur pour une autre propriété.

Valeurs

<single-animation-iteration-count>: Le nombre de fois où l'animation est jouée, cf.animation-iteration-count.
<single-animation-direction>: La direction dans laquelle s'effectue l'animation, cf.animation-direction.
<single-animation-fill-mode>: La façon dont les styles sont appliquées à la cible de l'animation, avant et après son exécution, cf.animation-fill-mode.
<single-animation-play-state>: Si l'animation est lancée ou non, cf.animation-play-state.

Définition formelle

Valeur initiale	pour chaque propriété individuelle de la propriété raccourcie : `animation-name`:`none` `animation-duration`:`0s` `animation-timing-function`:`ease` `animation-delay`:`0s` `animation-iteration-count`:`1` `animation-direction`:`normal` `animation-fill-mode`:`none` `animation-play-state`:`running` `animation-timeline`:`auto`
Applicabilité	tous les éléments
Héritée	non
Valeur calculée	pour chaque propriété individuelle de la propriété raccourcie : `animation-name`: comme spécifié `animation-duration`: comme spécifié `animation-timing-function`: comme spécifié `animation-delay`: comme spécifié `animation-direction`: comme spécifié `animation-iteration-count`: comme spécifié `animation-fill-mode`: comme spécifié `animation-play-state`: comme spécifié `animation-timeline`: a list, each item either a case-sensitive CSS identifier or the keywords`none`,`auto`
Type d'animation	Not animatable

Syntaxe formelle

animation =
<single-animation>#

<single-animation> =
<'animation-duration'>||
<easing-function>||
<'animation-delay'>||
<single-animation-iteration-count>||
<single-animation-direction>||
<single-animation-fill-mode>||
<single-animation-play-state>||
[none|<keyframes-name>]||
<single-animation-timeline>

<animation-duration> =
[auto|<time [0s,∞]>]#

<easing-function> =
<linear-easing-function>|
<cubic-bezier-easing-function>|
<step-easing-function>

<animation-delay> =
<time>#

<single-animation-iteration-count> =
infinite|
<number [0,∞]>

<single-animation-direction> =
normal|
reverse|
alternate|
alternate-reverse

<single-animation-fill-mode> =
none|
forwards|
backwards|
both

<single-animation-play-state> =
running|
paused

<keyframes-name> =
<custom-ident>|
<string>

<single-animation-timeline> =
auto|
none|
<dashed-ident>|
<scroll()>|
<view()>

<linear-easing-function> =
linear|
<linear()>

<cubic-bezier-easing-function> =
ease|
ease-in|
ease-out|
ease-in-out|
<cubic-bezier()>

<step-easing-function> =
step-start|
step-end|
<steps()>

<scroll()> =
scroll([<scroller>||<axis>]?)

<view()> =
view([<axis>||<'view-timeline-inset'>]?)

<linear()> =
linear([<number>&&<percentage>{0,2}]#)

<cubic-bezier()> =
cubic-bezier([<number [0,1]> ,<number>]#{2})

<steps()> =
steps(<integer> ,<step-position>?)

<scroller> =
root|
nearest|
self

<axis> =
block|
inline|
x|
y

<view-timeline-inset> =
[[auto|<length-percentage>]{1,2}]#

<step-position> =
jump-start|
jump-end|
jump-none|
jump-both|
start|
end

<length-percentage> =
<length>|
<percentage>

Exemples

Note :D'autres exemples sont disponibles sur la pageManipuler les animations CSS.

Vue laser

HTML

html

<div>  <div>En attente</div>  <div></div></div>

CSS

css

.polling_message {  color: white;  float: left;  margin-right: 2%;}.view_port {  background-color: black;  height: 25px;  width: 100%;  overflow: hidden;}.cylon_eye {  background-color: red;  background-image: linear-gradient(    to right,    rgba(0, 0, 0, 0.9) 25%,    rgba(0, 0, 0, 0.1) 50%,    rgba(0, 0, 0, 0.9) 75%  );  color: white;  height: 100%;  width: 20%;  -webkit-animation: 4s linear 0s infinite alternate move_eye;  animation: 4s linear 0s infinite alternate move_eye;}@-webkit-keyframes move_eye {  from {    margin-left: -20%;  }  to {    margin-left: 100%;  }}@keyframes move_eye {  from {    margin-left: -20%;  }  to {    margin-left: 100%;  }}

Résultat

Accessibilité

Les animations qui clignotent ou scintillent sont problématiques et notamment pour les personnes souffrant de problèmes cognitifs. De plus, certains types de mouvement peuvent déclencher des désordres vestibulaires, des épilepsies, des migraines ou une sensibilité scotopique.

Veillez à fournir un mécanisme qui permette d'interrompre ou de désactiver l'animation ainsi qu'à utiliserune requête média avecprefers-reduced-motion pour les mouvements réduits afin d'obtenir une ergonomie complémentaire pour les personnes souhaitant ne pas avoir d'animations.

Spécifications

Specification
CSS Animations Level 1 # animation

Compatibilité des navigateurs

Voir aussi

Help improve MDN

Learn how to contribute

Cette page a été modifiée le⁨9 nov. 2025⁩ par lescontributeurs du MDN.

View this page on GitHub •Report a problem with this content

Movatterモバイル変換

animation

HTML

CSS

Résultat

Help improve MDN