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-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 être none, 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 de animation-name des autres valeurs. Si une valeur dans la propriété 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 à cette propriété en priorité et non à animation-name. Pour cette raison, il est recommandé d'indiquer la valeur de animation-name en dernier dans la liste lors de l'utilisation de la propriété raccourcie animation ; cela reste vrai même lorsque vous définissez plusieurs animations séparées par des virgules avec la propriété raccourcie animation.

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é raccourcie animation sont optionnelles et prennent par défaut la valeur initiale de chaque composant long. 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 ne sera appliquée à aucune propriété.

Lorsque la valeur de animation-duration est omise dans la propriété raccourcie animation, la valeur de cette propriété est par défaut 0s. Dans ce cas, l'animation aura tout de même lieu (les évènements animationStart et animationEnd seront déclenchés) mais aucune animation ne sera visible.

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