Scroll-timeline - Propriété CSS
Résumé des caractéristiques de la propriété scroll-timeline
nonescroll-timeline ne peut pas être animée.Schéma de la syntaxe de scroll-timeline.
scroll-timeline.Cliquez sur les liens du schéma pour plus de précisons sur les valeurs.
Description des termes utilisés sur le schéma :
--idest un identifiant choisi par l'utilisateur. Son nom doit commencer par un double tiret.
Description de la propriété scroll-timeline.
scroll-timeline est une propriété résumée, permettant de définir en une seule écriture les valeurs pour les propriétés suivantes:
scroll-timeline-axis: Indique suivant quel axe (vertical ou horizontal) doit se synchroniser l'animation pilotée par le défilement.scroll-timeline-name: Définit un identifiant pour une animation synchronisée sur le défilement.
Ces deux propriétés (et donc également la propriété résumée scroll-timeline) s'appliquent à un conteneur défilable, c'est à dire un élément dont la propriété
overflow a été fixée à scroll ou auto.
Elles définissent de quelle façon ce conteneur pourra piloter une animation. L'identifiant --id peut ensuite être utilisé sur un élément enfant
du conteneur, ou sur le conteneur lui-même, avec la propriété animation-timeline.
Exemple simple d'utilisation :
/* Définition de l'animation */
@keyframes rotation {
from {rotate:0deg;}
to {rotate:90px;}
}
/* Règles appliquées au conteneur */
#de1-container {
height:100px;
overflow:scroll;
scroll-timeline: --demo block;
}
/* Règles appliquées à l'élément animé */
#de1-image {
animation:rotation 1ms linear;
animation-timeline:--demo;
}
Voici ce que ça donne sur un exemple. Le conteneur avec défilement contient l'image d'un ballon. Cette dernière est animée (rotation). En faisant défiler la barre de défilement verticale, vous verrez tourner le ballon.
⚠ Cet exemple ne fonctionne pas sur le navigateur Firefox 
à moins que vous n'ayez activé le flag
layout.css.scroll-driven-animations.enabled.
Autres propriétés à connaître.
Reportez-vous également aux propriétés détaillées scroll-timeline-name et scroll-timeline-axis.
Et aussi aux les pages suivantes :
overflow :scroll ou auto sur le conteneur défilant.scroll() :view() :Valeurs pour scroll-timeline.
- scroll-timeline: none;
L'élément n'est pas ou n'est plus un pilote pour les animations.
- scroll-timeline: --id block;
Cette syntaxe définit l'identifiant
--idpour un pilotage d'animation suivant l'axe de blocs. C'est en fait un cumul des syntaxes descroll-timeline-nameetscroll-timeline-axis. - scroll-timeline: --id1 block, --id2 inline;
Plusieurs définitions peuvent se succéder, en les séparant par une virgule.
- scroll-timeline: initial; scroll-timeline: inherit; scroll-timeline: revert; scroll-timeline: revertLayer; scroll-timeline: unset;
Consultez les pages suivantes pour plus de détails :
initial,inherit,revert,revert-layer,unset.
Tutoriel sur les animations pilotées par un défilement.
Généralités.
Les animations CSS consistent à faire évoluer la valeur d'une ou plusieurs propriétés entre une valeur mini et une valeur maxi.
On demande par exemple que le luminosité de la couleur d'arrière-plan évolue de 20% à 80% (voir @keyframes).
Ces animations sont classiquement pilotées par le temps : il suffit de définir la durée totale de l'animation avec la propriété animation-duration.
Pour notre exemple, prenons une animation sur 30 secondes (ce qui est très long). On peut alors établir une relation entre le temps et la luminosité.
Un nouveau type d'animation est maintenant possible : les animations pilotées par le défilement d'un élément (Scroll-driven Animations).
L'élément doit bien sûr permettre le défilement (voir la propriété overflow). La valeur de la propriété animée est alors définie par le pourcentage
de défilement appliqué à cet élément.
L'animation peut être pilotée aussi bien par le défilement vertical que par le défilement horizontal.
La propriété scroll-timeline-axis et la propriété résumée scroll-timeline permettent de définir quel baerre de défilement doit être utilisé pour
piloter l'animation.
Deux approches : scroll et view.
Les propriétés résumées scroll-timeline et view-timeline définissent un pilote pour les animations, avec deux logiques différentes :
scroll-timeline: l'animation est pilotée par la position d'une barre de défilement. Cette propriété doit être appliquée au conteneur comportant les barres de défilement.
Les animations peuvent être appliquées a un des éléments descendants de ce conteneur ou au conteneur défilant lui-même.view-timeline: l'animation est pilotée par la position d'un élément dans un conteneur défilant tant que cet élément est visible. Cette propriété est appliquée à l'élément qui défile.
Les animations peuvent être appliquées à ce conteneur défilant, ou à l'un de ses descendants.
Dans les deux cas, le lien entre l'animation et le pilote se fait avec la propriété animation-timeline, utilisée sur l'élément animé.
Sur le schéma, les éléments pouvant être animés sont repérés par une flèche circulaire.
la barre de défilement.
la visibilité de l'élément bleu.
Animations d'éléments non descendants.
On voit que les animations ne sont utilisables que sur les éléments descendants du conteneur défilant ou sur le conteneur défilant lui-même.
On peut cependant envisager d'utiliser un pilote sur des éléments qui ne serait pas des descendants du conteneur défilant, en utilisant la propriété
timeline-scope.
Cette propriété doit être positionnée sur un parent commun aux conteneur défilant et aux éléments animés.
C'est ce qui a été fait avec l'exemple ci-dessous. Trois rotations sont possibles pour le dé, pilotées chacune par un curseur. Ces derniers sont fournis
par des éléments défilants qui ne sont pas des parents du dé. Mais un parent commun a reçu la propriété timeline-scope.
Les trois éléments cube1, cube2 et cube3 reçoivent chacun une animation suivant l'un des axes.
Animations pilotées par le défilement - Syntaxe anonyme.
Cette syntaxe simplifiée ne nécessite qu'une seule règle, avec la propriété animation-timeline et l'une des fonctions scroll() ou view().
Cette règle doit être appliquée à l'élément animé, et ce dernier doit avoir un parent (direct ou indirect) acceptant le défilement, ou accepter lui-même le défilement.
Élément animé suivant son propre défilement
Élément animé suivant le défilement du conteneur défilant le plus proche
Voici un petit exemple : la couleur de l'élément tu4-content est pilotée par le défilement horizontal de l'élément parent tu4-container.
Il suffit d'utiliser la propriété animation-timeline sur l'élément animé.
A l'heure actuelle (2024) cet exemple ne fonctionne pas sur Firefox.
Note 1 : il est possible également de piloter l'animation d'après le défilement de l'élément racine de la page.
Note 2 : on retrouve des syntaxes équivalentes avec la fonction view().
Impact sur les autres propriétés relatives aux animations.
Le fait de définir animation-timeline rend inactive la propriété animation-duration. A l'inverse, la propriété animation-range
est activée. Les autres propriétés relatives aux animations conservent leur rôle, ou non, suivant le tableau ci-dessous.
| Animation pilotée par le temps | Animation pilotée par un défilement | |
|---|---|---|
animation-composition | Normal | |
animation-delay | Normal | Sans effet (1) |
animation-direction | Normal | Sans effet |
animation-duration | Normal | Sans effet (1) |
animation-fill-mode | Normal | |
animation-iteration-count | Normal | Sans effet |
animation-name | Normal | |
animation-play-state | Normal | |
animation-range | Sans effet | Normal |
animation-timing-function | Normal | |
(1) Néanmoins, si animation-delay est définie, animation-delay provoque un retard au démarrage de l'animation.
Pour en savoir plus...
- Un tutoriel sur les animations en CSS.
- La définition d'une animation avec
@keyframes. - Les propriétés pour définir un pilote :
scroll-timelineetview-timeline. - L'association d'un pilote à une animation avec
animation-timeline. - Les fonctions
scroll()etview(). - La propriété
timeline-scope.
Exemple d'animation de scroll-timeline.
Il n'est possible d'animer aucune des propriétés qui participent à la définition des animations. C'est donc le cas de scroll-timeline,
scroll-timeline-name et scroll-timeline-axis.
Exemple interactif avec la propriété scroll-timeline.
Le simulateur permet de choisir une valeur pour scroll-timeline-axis. La valeur de scroll-timeline-name est déjà définie et une animation
pilotée par le défilement (une rotation) est appliquée à l'image du ballon.
Compatibilité des navigateurs avec scroll-timeline.
Sur Firefox la prise en charge de ces propriétés est désactivée par défaut. Elle peut être activée en positionnant le flag
layout.css.scroll-driven-animations.enabled sur true (accéder aux flags sur Firefox).
scroll-timeline, résumée de scroll-timeline-name et scroll-timeline-axis.scroll-timeline-name.scroll-timeline-axis : définition de l'axe utilisé pour piloter les animations.Remarques :
(1) Désactivé par défaut. Peut être activé en basculant le flag layout.css.scroll-driven-animations.enabled sur true.
(2) Après activation, supporte les valeurs non standards horizontal et vertical.
scroll-timelinescroll-timeline-namescroll-timeline-axisNavigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Internet Explorer
UC Browser pour Androïd
Opéra Mobile
QQ Browser
Baidu Browser
Samsung Internet
Safari
Safari sur IOS
Chrome
Opéra
Edge
Chrome pour Androïd
Firefox pour Androïd
Firefox
Androïd Brower
KaiOS Browser
Opéra mini
Histoire de la propriété scroll-timeline.
-
Animations pilotées par un défilement - Niveau 1
Première présentation de la propriétéscroll-timeline.
25 Octobre 2022Document de travail.
Voir aussi, à propos des animations pilotées par un défilement.
Les animations pilotées par un défilement sont décrits dans le module Scroll-driven Animations. Les propriétés scroll-timeline,
scroll-timeline-axis et scroll-timeline-name, ainsi que toutes celles qui se rapporte au sujet sont également présentes dans ce module.