@scroll-timeline

Cette propriété est une propriété raccourcie pour les propriétés CSS suivantes :

• scroll-timeline-name
• scroll-timeline-axis

Une valeur <scroll-timeline-name> suivie d'une valeur <scroll-timeline-axis> peut être appliquée à l'élément conteneur dans n'importe quel ordre. Au moins une des deux valeurs doit être fournie.

Les valeurs autorisées pour <scroll-timeline-name> sont :

none

La chronologie n'a pas de nom associé.

<custom-ident>

Un identifiant personnalisé qui peut être utilisé pour faire référence à la chronologie de défilement dans une déclaration animation-timeline. Les valeurs possibles sont décrites sur la page du type <custom-ident>.

La valeur <scroll-timeline-axis> indique la barre de défilement de l'axe donné, pour l'élément identifié par <scroll-timeline-name>, qui fournit la chronologie de défilement. Les valeurs autorisées sont :

block

La valeur par défaut. C'est la barre de défilement sur l'axe de bloc qui contrôle la chronologie. L'axe de bloc correspond à la direction orthogonale au flux du texte sur une ligne. Pour les modes d'écritures horizontaux (comme le français ou l'anglais), cette valeur se comporte comme vertical, et pour les modes d'écritures verticaux, cette valeur se comporte comme horizontal.

inline

C'est la barre de défilement sur l'axe en ligne qui contrôle la chronologie. L'axe en ligne correspond à la direction parallèle au flux du texte sur une ligne. Pour les modes d'écritures horizontaux, cette valeur se comporte comme horizontal, et pour les modes d'écritures verticaux, cette valeur se comporte comme vertical.

vertical

C'est la barre de défilement sur l'axe vertical qui contrôle la chronologie.

horizontal

C'est la barre de défilement sur l'axe horizontal qui contrôle la chronologie.

scroll-timeline = 
  [ <'scroll-timeline-name'> <'scroll-timeline-axis'>? ]#  

<scroll-timeline-name> = 
  [ none | <dashed-ident> ]#  

<scroll-timeline-axis> = 
  [ block | inline | x | y ]#  

Dans cet exemple, on définit une chronologie de défilement intitulée squareTimeline grâce à la propriété scroll-timeline-name sur l'élément avec l'identifiant container. Celle-ci est ensuite appliquée à l'animation de l'élément #square en utilisant animation-timeline: squareTimeline.

Voici le fragment HTML utilisé pour l'exemple.

<div id="container">
  <div id="square"></div>
  <div id="stretcher"></div>
</div>

Quant au CSS, on définit le conteneur comme source d'une chronologie de défilement intitulée squareTimeline à l'aide de la propriété scroll-timeline. On définit également que la barre de défilement pour la chronologie est la barre verticale (avec vertical) (c'est le comportement qui aurait été utilisé par défaut).

La hauteur du conteneur est fixée à 300px et on force la création d'une barre de défilement verticale en cas de défilement (nous allons utiliser l'élément avec l'identifiant stretcher pour forcer ce dépassement).

#container {
  height: 300px;
  overflow-y: scroll;
  scroll-timeline: squareTimeline vertical;
  position: relative;
}

Le CSS qui suit définit un carré qui tourne dans des directions alternées, selon la chronologie fournie par la propriété animation-timeline, qui est fixée avec la valeur squareTimeline déclarée ci-avant.

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

  position: absolute;
  bottom: 0;
}

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

Enfin, on définit la hauteur de l'élément d'identifiant stretcher afin de forcer le dépassement dans le conteneur et pour créer les barres de défilement. Sans cet élément, il n'y aurait pas de barre de défilement et pas de chronologie de défilement à associer avec l'animation.

#stretcher {
  height: 600px;
}

Faites défiler la barre verticale afin d'observer l'animation.

• animation-timeline