animation-timeline
==================

La propriété CSS **`animation-timeline`** indique le nom d'une ou plusieurs règles @ `@scroll-timeline` décrivant les animations de défilement à appliquer à l'élément.

Il est généralement plus pratique d'utiliser la propriété raccourcie `animation` afin de définir l'ensemble des propriétés relatives à une animation en une fois.

Syntaxe
-------


```css
/\* Une seule animation \*/
animation-timeline: none;
animation-timeline: test_05;
animation-timeline: -specific;
animation-timeline: sliding-vertically;

/\* Plusieurs animations \*/
animation-timeline: test1, animation4;
animation-timeline:
  none,
  -moz-specific,
  sliding;

/\* Valeurs globales \*/
animation-timeline: inherit;
animation-timeline: initial;
animation-timeline: revert;
animation-timeline: revert-layer;
animation-timeline: unset;
```

### Valeurs

`auto`

La chronologie de l'animation est la chronologie par défaut du document (`DocumentTimeline`) (en-US).

`none`

L'animation n'est associée à aucune chronologie.

`<timeline-name>`

Un identifiant (`custom-ident`) ou une chaîne de caractères identifiant la chronologie de défilement, déclarée via une règle `@scroll-timeline`. Si deux chronologies de défilement (ou plus) partagent le même nom, c'est la dernière déclarée au sein de la cascade qui sera utilisée. Si aucune chronologie de défilement correspondante n'est trouvée, l'animation ne sera pas associée à une chronologie.

Définition formelle
-------------------

|  |  |
| --- | --- |
| Valeur initiale | `auto` |
| Applicabilité | tous les éléments |
| Héritée | non |
| Valeur calculée | a list, each item either a case-sensitive CSS identifier or the keywords `none`, `auto` |
| Type d'animation | Not animatable |

Syntaxe formelle
----------------
```

animation-timeline =   
  <single-animation-timeline>#    
  
<single-animation-timeline> =   
  auto            |  
  none            |  
  <dashed-ident> (en-US)  |  
  <scroll()>      |  
  <view()>          
  
<scroll()> =   
  scroll( [ <scroller> || <axis> ]? )    
  
<view()> =   
  view( [ <axis> || <'view-timeline-inset'> ]? )    
  
<scroller> =   
  root     |  
  nearest  |  
  self       
  
<axis> =   
  block   |  
  inline  |  
  x       |  
  y         
  
```

Exemples
--------

### Définir une chronologie de défilement

Dans cet exemple, on déclare une chronologie de défilement intitulée `squareTimeline` qu'on applique à l'élément `#square` en utilisant `animation-timeline: squareTimeline`.

#### HTML


```html
<div id="container">
  <div id="square"></div>
</div>
```


#### CSS


```css
#container {
  height: 300px;
}

#square {
  background-color: deeppink;
  width: 100px;
  height: 100px;
  margin-top: 100px;
  animation-name: rotateAnimation;
  animation-duration: 3s;
  animation-direction: alternate;
  animation-timeline: squareTimeline;
}

@scroll-timeline squareTimeline {
  source: selector("#container");
  orientation: "vertical";
  scroll-offsets: 0px, 300px;
}

@keyframes rotateAnimation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
```


#### Résultat

Faites défiler le cadre pour observer l'animation.

Spécifications
--------------

| Specification |
| --- |
| CSS Animations Level 2 # animation-timeline |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* Utiliser les animations CSS
* La règle @ `@scroll-timeline`