scroll-timeline-name

Syntaxe

scroll-timeline-name: none;
scroll-timeline-name: --custom_name_for_timeline;

Valeurs

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

none

La chronologie n'a pas de nom.

<dashed-ident>

Un identifiant personnalisé arbitraire définissant un nom pour une chronologie de progression de défilement, qui peut ensuite être référencé dans une propriété animation-timeline.

Note : Les valeurs de type <dashed-ident> doivent commencer par --, ce qui aide à éviter les conflits de noms avec les mots-clés CSS standard.

Définition formelle

Syntaxe formelle

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

Exemples

Créer une animation de chronologie de progression de défilement nommée

Dans cet exemple, une chronologie de progression de défilement nommée --chronologie-du-carre est définie en utilisant la propriété scroll-timeline-name sur l'élément avec l'ID container. Cette chronologie est ensuite appliquée à l'animation sur l'élément #square en utilisant animation-timeline: --chronologie-du-carre.

HTML

Le HTML pour l'exemple est montré ci-dessous.

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

CSS

Le CSS pour le conteneur le définit comme la source d'une chronologie de progression de défilement nommée --chronologie-du-carre en utilisant la propriété scroll-timeline-name. Aucun axe de la barre de défilement n'est défini ici, car l'axe vertical sera utilisé par défaut.

La hauteur du conteneur est définie sur 300px, et le conteneur est également configuré pour créer une barre de défilement verticale si son contenu déborde (la règle CSS height sur l'élément stretcher ci-dessous fait en sorte que le contenu déborde de son conteneur).

#container {
  height: 300px;
  overflow-y: scroll;
  scroll-timeline-name: --chronologie-du-carre;
  position: relative;
}

Le CSS ci-dessous définit un carré qui tourne en fonction de la chronologie fournie par la propriété animation-timeline, qui est définie sur la chronologie nommée --chronologie-du-carre ci-dessus.

#square {
  background-color: deeppink;
  width: 100px;
  height: 100px;
  margin-top: 100px;
  animation-name: rotateAnimation;
  animation-duration: 1ms; /* Firefox nécessite cela pour appliquer l'animation */
  animation-timeline: --chronologie-du-carre;
  position: absolute;
  bottom: 0;
}

#stretcher {
  height: 600px;
  background: #dedede;
}

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

  to {
    transform: rotate(360deg);
  }
}

La règle CSS stretcher définit la hauteur du bloc à 600px, ce qui crée un contenu qui déborde de l'élément conteneur, créant ainsi des barres de défilement. Sans cet élément, le contenu ne déborderait pas du conteneur, il n'y aurait pas de barre de défilement et donc aucune chronologie de défilement à associer à la chronologie d'animation.

Résultat

Faites défiler la barre verticale pour voir le carré s'animer au fur et à mesure du défilement.

Spécifications

Compatibilité des navigateurs

Voir aussi

• La propriété animation-timeline
• Les propriétés scroll-timeline, scroll-timeline-axis
• La propriété timeline-scope
• Le module d'animations pilotées par le défilement CSS