Lapropriété raccourcieCSSanimation permet d'appliquer une animation entre des styles. Il s'agit d'une propriété raccourcie pouranimation-name,animation-duration,animation-timing-function,animation-delay,animation-iteration-count,animation-direction,animation-fill-mode,animation-play-state etanimation-timeline.

Exemple interactif

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

animation: 3s linear 1s infinite running slide-in;

animation: 3s linear 1s infinite alternate slide-in;

animation: 0.5s linear 1s infinite alternate slide-in;

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

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

Propriétés constitutives

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

• animation-delay
• animation-direction
• animation-duration
• animation-fill-mode
• animation-iteration-count
• animation-name
• animation-play-state
• animation-timeline
• animation-timing-function

Syntaxe

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

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, une ou deux occurrences de la valeur<time>.

• zéro ou une valeur du type :

  • <single-easing-function>
  • <single-animation-iteration-count>
  • <single-animation-direction>
  • <single-animation-fill-mode>
  • <single-animation-play-state>

• un nom optionnel pour l'animation, qui peut êtrenone, un identifiant personnalisé (<custom-ident>) ou une chaîne de caractères (<string>).

Valeurs

<single-easing-function>

Détermine le type de transition. La valeur doit être l'une de celles disponibles dans<easing-function>.

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

Description

L'ordre des valeurs de temps dans chaque définition d'animation est important : la première valeur pouvant être analysée comme<time> est affectée àanimation-duration et la seconde àanimation-delay.

L'ordre des autres valeurs dans chaque définition d'animation est aussi important pour distinguer une valeur deanimation-name des autres valeurs. Si une valeur dans la propriété raccourcieanimation peut être analysée comme une valeur pour une propriété d'animation autre queanimation-name, alors la valeur sera appliquée à cette propriété en priorité et non àanimation-name. Pour cette raison, il est recommandé d'indiquer la valeur deanimation-name en dernier dans la liste lors de l'utilisation de la propriété raccourcieanimation ; cela reste vrai même lorsque vous définissez plusieurs animations séparées par des virgules avec la propriété raccourcieanimation.

Bien qu'un nom de l'animation doive être défini pour qu'une animation soit appliquée, toutes les valeurs de la propriété raccourcieanimation sont optionnelles et prennent par défaut la valeur initiale de chaque composant long. La valeur initiale deanimation-name estnone, ce qui signifie que si aucune valeuranimation-name n'est déclarée dans la propriété raccourcieanimation, aucune animation ne sera appliquée à aucune propriété.

Lorsque la valeur deanimation-duration est omise dans la propriété raccourcieanimation, la valeur de cette propriété est par défaut0s. Dans ce cas, l'animation aura tout de même lieu (les évènementsanimationStart etanimationEnd seront déclenchés) mais aucune animation ne sera visible.

Dans le cas de la valeurforwards pouranimation-fill-mode, les propriétés animées se comportent comme si elles étaient incluses dans une propriétéwill-change. Si un nouveau contexte d'empilement est créé pendant l'animation, l'élément cible conserve ce contexte d'empilement après la fin de l'animation.

Accessibilité

Les animations qui clignotent ou scintillent sont problématiques, notamment pour les personnes souffrant de troubles cognitifs comme le trouble du déficit de l'attention avec ou sans hyperactivité (TDAH). De plus, certains types de mouvements peuvent déclencher des troubles vestibulaires, des crises d'épilepsie, des migraines ou une sensibilité scotopique.

Veillez à fournir un mécanisme permettant d'interrompre ou de désactiver l'animation ainsi qu'à utiliserla requête média pour la préférence de réduction des animations pour offrir une expérience complémentaire aux utilisateur·ice·s qui ont exprimé une préférence pour la réduction des animations.

• Concevoir des animations web plus sûres pour la sensibilité au mouvement · Article de An A List Apart^(angl.)
• Introduction à la requête média pour la réduction des animations | CSS-Tricks^(angl.)
• Responsive Design for Motion | WebKit^(angl.)
• Explications MDN sur la directive 2.2 des WCAG
• Comprendre le critère de succès 2.2.2 | W3C Understanding WCAG 2.0^(angl.)

Définition formelle

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}]#

<integer> =
<number-token>

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

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

Exemples

Lever de soleil

Ici, nous animons un soleil jaune à travers un ciel bleu clair. Le soleil s'élève jusqu'au centre de la zone d'affichage puis disparaît hors de vue.

<div></div>

:root {  overflow: hidden; /* masque toute partie du soleil sous l'horizon */  background-color: lightblue;  display: flex;  justify-content: center; /* centre le soleil dans l'arrière-plan */}.soleil {  background-color: yellow;  border-radius: 50%; /* crée un arrière-plan circulaire */  height: 100vh; /* donne au soleil la taille de la zone d'affichage */  aspect-ratio: 1 / 1;  animation: 4s linear 0s infinite alternate soleil-levant;}@keyframes soleil-levant {  from {    /* pousse le soleil en dessous de la zone d'affichage */    transform: translateY(110vh);  }  to {    /* ramène le soleil à sa position par défaut */    transform: translateY(0);  }}

Animer plusieurs propriétés

En ajoutant à l'animation du soleil de l'exemple précédent, nous ajoutons une seconde animation qui change la couleur du soleil lorsqu'il s'élève et se couche. Le soleil commence rouge foncé lorsqu'il est sous l'horizon et devient orange vif lorsqu'il atteint le sommet.

<div></div>

:root {  overflow: hidden;  background-color: lightblue;  display: flex;  justify-content: center;}.soleil {  background-color: yellow;  border-radius: 50%;  height: 100vh;  aspect-ratio: 1 / 1;  animation: 4s linear 0s infinite alternate animation-propriete-multiples;}/* il est possible d'animer plusieurs propriétés dans une seule animation */@keyframes animation-propriete-multiples {  from {    transform: translateY(110vh);    background-color: red;    filter: brightness(75%);  }  to {    transform: translateY(0);    background-color: orange;    /* les propriétés désactivées, c'est-à-dire 'filter', reviendront à leurs valeurs par défaut */  }}

Appliquer plusieurs animations

Voici un soleil qui monte et descend sur un fond bleu clair. Le soleil tourne progressivement à travers un arc-en-ciel de couleurs. Le rythme de la position et de la couleur du soleil est indépendant.

<div></div>

:root {  overflow: hidden;  background-color: lightblue;  display: flex;  justify-content: center;}.soleil {  background-color: yellow;  border-radius: 50%;  height: 100vh;  aspect-ratio: 1 / 1;  /* plusieurs animations sont séparées par des virgules, chaque animation a ses paramètres définis indépendamment */  animation:    4s linear 0s infinite alternate levee,    24s linear 0s infinite psychedelic;}@keyframes levee {  from {    transform: translateY(110vh);  }  to {    transform: translateY(0);  }}@keyframes psychedelic {  from {    filter: hue-rotate(0deg);  }  to {    filter: hue-rotate(360deg);  }}

Enchaîner plusieurs animations

Voici un soleil jaune sur un fond bleu clair. Le soleil rebondit entre le côté gauche et le côté droit de la zone d'affichage. Le soleil reste dans la zone d'affichage même si une animation de montée est définie. La propriété transform de l'animation de montée est « surchargée » par l'animation de rebond.

<div></div>

:root {  overflow: hidden;  background-color: lightblue;  display: flex;  justify-content: center;}.soleil {  background-color: yellow;  border-radius: 50%;  height: 100vh;  aspect-ratio: 1 / 1;  /*      les animations déclarées plus tard dans la cascade vont remplacer      les propriétés des animations déclarées précédemment    */  /* rebond « surcharge » la propriété transform définie par montée, ainsi le soleil ne se déplace que horizontalement */  animation:    4s linear 0s infinite alternate levee,    4s linear 0s infinite alternate rebond;}@keyframes levee {  from {    transform: translateY(110vh);  }  to {    transform: translateY(0);  }}@keyframes rebond {  from {    transform: translateX(-50vw);  }  to {    transform: translateX(50vw);  }}

VoirUtiliser les animations CSS pour d'autres exemples.

Spécifications

Compatibilité des navigateurs

Voir aussi

• Manipuler les animations CSS
• L'interface APIAnimationEvent