Propriété CSS animation

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 class="flex-column" id="default-example">
  <div id="example-element"></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-name
• animation-duration
• animation-timing-function
• animation-delay
• animation-direction
• animation-iteration-count
• animation-fill-mode
• animation-play-state
• animation-timeline

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;

Valeurs

Une ou plusieurs déclarations <animation>, séparées par des virgules, chaque <animation> incluant :

<keyframes-name> ou none

Le nom d'une règle @keyframes qui définit l'animation à appliquer à un élément. La valeur initiale pour animation-name est none.

<animation-duration>

Détermine la durée nécessaire pour qu'une animation complète un cycle. La valeur doit être l'une de celles disponibles dans animation-duration. La valeur initiale est 0s.

<easing-function>

Détermine le type de transition. La valeur doit être l'une de celles disponibles dans animation-timing-function. La valeur initiale est ease.

<animation-delay>

Détermine le temps à attendre après l'application de l'animation à un élément avant de commencer à exécuter l'animation. La valeur doit être l'une de celles disponibles dans animation-delay. La valeur initiale est 0s.

<single-animation-direction>

La direction dans laquelle l'animation est jouée. La valeur doit être l'une de celles disponibles dans animation-direction. La valeur initiale pour animation-direction est normal.

<single-animation-iteration-count>

Le nombre de fois que l'animation est jouée. La valeur doit être l'une de celles disponibles dans animation-iteration-count. La valeur initiale pour animation-iteration-count est 1.

<single-animation-fill-mode>

Détermine comment les styles doivent être appliqués à la cible de l'animation avant et après son exécution. La valeur doit être l'une de celles disponibles dans animation-fill-mode. La valeur initiale pour animation-fill-mode est none.

<single-animation-play-state>

Détermine si l'animation est en cours de lecture ou non. La valeur doit être l'une de celles disponibles dans animation-play-state. La valeur initiale pour animation-play-state est running.

<single-animation-timeline>

Détermine la chronologie utilisée pour contrôler la progression de l'animation. La valeur doit être l'une de celles disponibles dans animation-timeline. La valeur initiale est auto.

Description

La propriété animation est définie sous la forme d'une ou plusieurs animations distinctes, séparées par des virgules. Chaque animation de la liste d'animations séparées par des virgules définit animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state et animation-timeline. Si l'une des composantes n'est pas incluse dans une déclaration animation, la valeur de la composante est définie sur la valeur initiale de la composante.

animation-name

Le composant <animation-name> de chaque animation correspond au nom de l'animation, qui peut être none, un <custom-ident>, ou un <string>. La valeur initiale de animation-name est none, ce qui signifie que si aucune valeur animation-name n'est déclarée dans la propriété raccourcie animation, aucune animation n'est appliquée à aucune des propriétés.

L'ordre des autres valeurs dans une définition d'animation est important pour distinguer une valeur animation-name des autres valeurs. Si une valeur dans la notation raccourcie animation peut être analysée comme une valeur pour une propriété d'animation autre que animation-name, alors la valeur sera appliquée d'abord à cette propriété et non à animation-name. Pour cette raison, il est recommandé de définir une valeur pour animation-name comme dernière valeur d'une liste lors de l'utilisation de la notation raccourcie animation ; cela reste vrai même lorsque vous définissez plusieurs animations séparées par des virgules en utilisant la notation raccourcie animation.

Valeurs temporelles

Chaque animation peut inclure zéro, une ou deux occurrences de la valeur <time>. L'ordre des valeurs temporelles dans chaque définition d'animation est important : la première valeur pouvant être analysée comme une <time> est affectée à animation-duration, et la seconde est affectée à animation-delay.

Si aucune valeur animation-duration n'est définie dans la propriété raccourcie animation, la durée prend la valeur par défaut 0s. Dans ce cas, l'animation aura quand même lieu (les évènements animationStart et animationEnd seront déclenchés), mais aucune animation ne sera visible pour l'utilisateur·ice.

animation-timeline

Les implémentations actuelles de animation sont en mode réinitialisation uniquement : si aucun <animation-timeline> n'est inclus dans la notation raccourcie animation, la déclaration raccourcie réinitialisera toutes les valeurs animation-timeline précédemment déclarées à auto.

Par défaut, animation-timeline est le documentTimeline. Si une valeur est incluse, mais que l'agent utilisateur ne prend pas en charge les valeurs <animation-timeline> dans la notation raccourcie, la déclaration est invalide et est ignorée.

Cela signifie que, lors de la création d'animations CSS pilotées par le défilement, vous devez déclarer la propriété animation-timeline après avoir déclaré toute notation raccourcie animation pour qu'elle prenne effet.

Alternativement, la propriété animation-timeline peut être utilisée dans la notation raccourcie animation au sein d'un bloc CSS @supports, par exemple :

@supports (animation: view()) {
  /* CSS pour les navigateurs qui prennent en charge la définition de <animation-timeline> dans la notation raccourcie animation */
}

animation-fill-mode et nouveaux contextes d'empilement

Dans le cas de la valeur forwards pour animation-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'à utiliser la 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 A List Apart ^(angl.)
• Introduction à la requête média pour la réduction des animations | CSS-Tricks ^(angl.)
• Conception réactive pour le mouvement | WebKit ^(angl.)
• Explications WCAG sur MDN, explications de la règle 2.2 des WCAG
• Comprendre le critère de succès 2.2.2 | Comprendre le WCAG 2.0 du W3C ^(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 class="soleil"></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 class="soleil"></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 class="soleil"></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 class="soleil"></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);
  }
}

Voir Utiliser les animations CSS pour d'autres exemples.

Spécifications

Compatibilité des navigateurs

Voir aussi

• Manipuler les animations CSS
• L'interface API AnimationEvent