Timeline-scope - Propriété CSS
Résumé des caractéristiques de la propriété timeline-scope
noneDescription de la propriété timeline-scope.
La propriété timeline-scope concerne les animations pilotées par un défilement.
Rappelons que ces animations se définissent avec les propriétés scroll-timeline ou view-timeline sur un conteneur avec barres de défilement,
et qu'elles peuvent ensuite être appliquées à n'importe quel élément descendant de ce conteneur, ou au conteneur lui-même avec la propriété
animation-timeline.
La propriété timeline-scope permet d'étendre cette utilisation à des éléments qui ne seraient pas des descendants du conteneur.
Voici un exemple concret pour rappel du fonctionnement des animations pilotées par un défilement.
Un conteneur avec barres de défilement définit un pilotage nommé --demo1
(le nom peut être choisi librement mais le double tiret est obligatoire).
L'animation (une simple rotation) est appliquée à l'image d'une roue, celle-ci étant incluse dans le conteneur précédent.
Pour que la roue ne disparaisse pas à cause du défilement, sa position a été définie sur sticky.
⚠ L'exemple ne fonctionne pas sur Firefox (2024), mais les codes CSS peuvent néanmoins être consultés.
Jusque là tout va bien parce que l'élément animé (la roue) est inclus dans le conteneur défilant. Mais si on souhaite animer un élément qui n'est pas un descendant
du conteneur défilant, ce ne sera pas possible. C'est là qu'intervient la propriété timeline-scope qui va nous permettre d'utiliser ce défilement pour animer
n'importe quel élément de la page.
Sans utilisation de
timeline-scope
Avec utilisation de
timeline-scope
Voici le code avec timeline-scope. La barre de défilement n'est pas le parent de l'image, mais en appliquant timeline-scope sur le conteneur,
on retrouve un fonctionnement correct.
Principales propriétés à connaître.
Voici les propriétés et fonctions à connaître pour mettre en œuvre des animations pilotées par un défilement.
overflow :scroll ou auto sur le conteneur défilant.scroll() :view() :Valeurs pour timeline-scope.
- timeline-scope: none;
Avec la valeur
none, la propriététimeline-scopen'a aucun effet. Cette valeur peut cependant être utile pour annuler une valeur héritée. - timeline-scope: --id;
--idest un identifiant choisi par l'utilisateur. Il doit commencer par un double tiret. Cet identifiant se retrouve dans un descendant de l'élément comme valeur de la propriétéanimation-timeline. Il se retrouve également dans la barre de défilement comme valeur descroll-timelineouview-timeline.. - timeline-scope: initial; (
none) timeline-scope: inherit; timeline-scope: revert; timeline-scope: revertLayer; timeline-scope: unset;Les valeurs communes sont présentées sur ces pages :
initial,inherit,revert,revert-layer,unset.
Exemples d'utilisation de la propriété timeline-scope.
Ces exemples ne fonctionneront pas sur Firefox, à moins que vous n'ayez activé le flag layout.css.scroll-driven-animations.enabled (accéder aux flags sur Firefox).
Piloter la rotation d'une image.
Sur cet exemple, la barre de défilement ex1-progress fait tourner l'image ex1-image. La barre de défilement n'est pas un parent
de l'image. Leur parent commun porte l'identifiant ex1. Grace à la propriété timeline-scope il a été possible d'associer la rotation de l'image
à la barre de défilement.
Effet de crantage.
Ici nous jouons sur le facteur d'échelle de l'image.
L'effet de crantage est obtenu par la fonction steps() associée à la propriété animation-timing-function.
Piloter suivant les trois axes.
Voila un exemple avec un CSS un peu plus compliqué. Il faut tout d'abord construire le cube, ce qui se fait par transformation successive de six images représentant les six faces du cube (rotations et translations).
Le cube une fois construit est enfermé dans trois conteneurs successifs cube1, cube2 et cube3, chacun recevant
une rotation dans un des axes.
Exemple d'animation de timeline-scope.
La propriété timeline-scope ne peut pas être animée, comme toutes les autres propriétés qui servent à définir les animations.
Exemple interactif avec la propriété timeline-scope.
Le conteneur défilant (en bleu) définit l'identifiant --demo2 associé à son défilement vertical. Les deux images de roue tentent d'utiliser
cet identifiant. Pour la première, qui est incluse dans le conteneur défilant, cela fonctionne toujours, mais pour la roue de droite, il faut étendre la
portée de --demo2.
La propriété timeline-scope est appliquée au conteneur vert, plus haut dans l'arborescence, et qui inclut la deuxième roue.
⚠ Le fonctionnement ne sera pas possible sur Firefox (2024).
Compatibilité des navigateurs avec timeline-scope.
timeline-scope pour changer la portée des identifiants définis par scroll-timeline-name.Remarques :
(1) Peut être activé en positionnant à true le flag layout.css.scroll-driven-animations.enabled.
timeline-scopeNavigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Internet Explorer
Baidu Browser
QQ Browser
Opéra Mobile
Firefox
Chrome
Safari
Edge
Opéra
Chrome pour Androïd
Safari sur IOS
Samsung Internet
UC Browser pour Androïd
Androïd Brower
Firefox pour Androïd
KaiOS Browser
Opéra mini
Histoire de la propriété timeline-scope.
-
Animations pilotées par un défilement - Niveau 1
Première présentation de la propriététimeline-scope.
25 Octobre 2022Document de travail.
Voir aussi, au sujet des animation pilotées par un défilement.
Les animation pilotées par un défilement sont regroupées dans le module Scroll-driven Animations. La propriété timeline-scope
figure dans ce module, ainsi que les définitions suivantes :