animation-timeline

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

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

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 initialeauto
Applicabilitétous les éléments
Héritéenon
Valeur calculéea list, each item either a case-sensitive CSS identifier or the keywords none, auto
Type d'animationNot animatable

Syntaxe formelle

animation-timeline = 
  <single-animation-timeline>#  

<single-animation-timeline> = 
  auto            |
  none            |
  <dashed-ident>  |
  <scroll()>      |
  <view()>        

<scroll()> = 
  scroll( [ <scroller> || <axis> ]? )  

<view()> = 
  view( [ <axis> || <'view-timeline-inset'> ]? )  

<scroller> = 
  root     |
  nearest  |
  self     

<axis> = 
  block   |
  inline  |
  x       |
  y       

<view-timeline-inset> = 
  [ [ auto | <length-percentage> ]{1,2} ]#  

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

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

Voir aussi