animation

La propriété animation est une propriété raccourcie pour les propriétés suivantes :

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

/* @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;

Une liste des propriétés qui peuvent être animées est disponible. On notera que cette liste est également valable pour les 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 :
  • <single-transition-timing-function>
  • <single-animation-iteration-count>
  • <single-animation-direction>
  • <single-animation-fill-mode>
  • <single-animation-play-state>
• 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 de animation-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 que animation-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 pour animation-name qui pourrait être une valeur pour une autre propriété.

Valeurs

<single-animation-iteration-count>

Soit la valeur infinite, soit un nombre (<number>).

<single-animation-direction>

Un mot-clé parmi normal, reverse, alternate ou alternate-reverse.

<single-animation-fill-mode>

Un mot-clé parmi none, forwards, backwards ou both.

<single-animation-play-state>

Un mot-clé parmi running ou paused.

Syntaxe formelle

<single-animation>#
où 
<single-animation> = <time> || <single-timing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode> || <single-animation-play-state> || [ none | <keyframes-name> ]
où 
<single-timing-function> = linear | <cubic-bezier-timing-function> | <step-timing-function> | <frames-timing-function>
<single-animation-iteration-count> = infinite | <number>
<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>
où 
<cubic-bezier-timing-function> = ease | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)
<step-timing-function> = step-start | step-end | steps(<integer>[, [ start | end ] ]?)
<frames-timing-function> = frames(<integer>)

Exemples

Vue laser

HTML

<div class="view_port">
  <div class="polling_message">
    En attente
  </div>
  <div class="cylon_eye"></div>
</div>

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

Spécifications

Compatibilité des navigateurs

[1] Support partiel, animation-fill-mode n'est pas prise en charge par le navigateur Android avant 2.3.

[2] En plus de la version préfixée par -moz, Gecko 44.0 (Firefox 44.0 / Thunderbird 44.0 / SeaMonkey 2.41) prend en charge la version préfixée par -webkit à des fins de compatibilité web grâce à la préférence layout.css.prefixes.webkit dont la valeur par défaut vaut false. Depuis Gecko 49.0 (Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46), cette valeur par défaut est passée à true.

[3] Cf. les notes de version d'Opera 12.50.

Voir aussi

• Manipuler les animations CSS
• AnimationEvent