Scroll-timeline-name - Propriété CSS
Résumé des caractéristiques de la propriété scroll-timeline-name
nonescroll-timeline-name ne peut pas être animée.Syntaxe de scroll-timeline-name (schéma).
Description des termes utilisés sur le schéma (les termes en gras sont prédéfinis) :
--idest un identifiant choisi par l'utilisateur. Son nom doit commencer par un double tiret.
Description de la propriété scroll-timeline-name.
Les animations pilotées par le défilement sont une notion nouvelle introduite récemment en CSS.
La propriété scroll-timeline-name s'applique à un conteneur défilable, c'est à dire un élément dont la propriété overflow a été fixée à
scroll ou auto.
Elle définit un identifiant, qui pourra ensuite être utilisé sur un ou plusieurs des descendants, avec la propriété animation-timeline.
Cet élément est alors animé par le défilement du parent.
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-name: --demo;
}
/* 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 Firefox 
.
Autres propriétés à connaître.
Voici les propriétés et fonctions nécessaires pour la mise en œuvre des animations pilotées par un défilement.
scroll() :view() :Valeurs pour scroll-timeline-name.
- scroll-timeline-name: none;
L'élément ne pourra pas être utilisé pour piloter les animations. C'est la valeur par défaut.
- scroll-timeline-name: --id;
Cette syntaxe définit
--idcomme un identifiant, qui sera utilisé paranimation-timeline. Cet identifiant peut être librement choisi par l'utilisateur, mais son nom doit obligatoirement commencer par un double tiret. - scroll-timeline-name: --id1, --id2;
Plusieurs identifiants peuvent être définis, séparés par des virgules. On peut, par exemple, définir un identifiant pour le défilement vertical, et un autre pour le défilement horizontal.
- scroll-timeline-name: initial; (
none) scroll-timeline-name: inherit; scroll-timeline-name: revert; scroll-timeline-name: revertLayer; scroll-timeline-name: unset;Liens vers la présentation de ces différentes valeurs :
initial,inherit,revert,revert-layer,unset.
Exemples avec la propriété scroll-timeline-name.
Exemple 1.
Dans ce premier exemple, l'image en tête de l'article grossit au fur et à mesure du défilement. Puis se transforme progressivement en X, le nouveau logo de twitter. Sur Firefox la transition entre l'oiseau bleu et le X est brutale.
Twitter est créé le 21 mars 2006 par Jack Dorsey, Evan Williams, Biz Stone et Noah Glass. Le site affiche cinq cent millions d'utilisateurs fin 2012.
Le quinze janvier deux mille neuf, un Airbus A320 amerrit dans le fleuve Hudson à New York. Un citoyen américain qui se trouvait à bord d'un ferry, a assisté en direct à l'amerrissage. Il publie alors une photo de l'avion, avec le message : « Il y a un avion dans l'Hudson. Je suis dans le ferry qui va récupérer les passagers. C'est dingue ». Ce tweet fit le tour du réseau social, avant d'être repéré par des journalistes. Il est présenté comme le début d'une révolution dans le monde de l'information : celle de Twitter où ce n'était plus les « médias traditionnels qui rapportaient les premiers l'information, mais un citoyen équipé d'un simple smartphone ». Biz Stone, l'un des fondateurs du réseau social, affirme : « Ce moment a tout changé. Soudain, le monde a commencé à nous prêter attention, parce qu'on était la source d'une info – et ce n'était pas nous, c'était l'utilisateur sur le bateau, ce qui est encore plus incroyable. »
Le 14 avril 2022, Elon Musk propose de racheter l'entièreté de Twitter pour 44 milliards de dollars. Elon Musk déclare vouloir racheter l'entreprise au nom du principe de liberté d'expression. Il déclare également vouloir davantage de transparence au niveau de l'algorithme en rendant public le code source et « vaincre les robots de spam et authentifier tous les humains ». Le 25 avril, le conseil d'administration de Twitter accepte l'offre de rachat d'Elon Musk. À la suite de cet accord, des personnalités politiques réagissent, notamment la sénatrice Elizabeth Warren qui considère que « l'accord était dangereux pour notre démocratie » tandis que la sénatrice républicaine Marsha Blackburn du Tennessee déclare : « J'espère qu'Elon Musk aidera à maîtriser l'histoire de Big Tech en matière de censure des utilisateurs qui ont un point de vue différent. ». La Maison-Blanche réagit en rappelant la position du président Biden qui soutient les changements apportés à la loi Anti-trust pour contrer les monopoles des plateformes numériques. De son côté, l'ancien président Donald Trump, banni de Twitter au lendemain des émeutes du Capitole, déclare qu'il ne souhaite pas se réinscrire et continuera à communiquer à travers son propre réseau social Truth Social tout en considérant que ce rachat est une évolution positive dans l'espace des médias sociaux.
Exemple 2.
Afficher des indicateurs de début et de fin de défilement. Il est courant d'afficher des marques pour indiquer que les limites du défilement sont atteintes, grace aux animations pilotées par le défilement, il est possible de faire cela rien qu'avec du CSS, sans Javascript.
- @keyframes: Définit le nom d'une animation et quelles sont les propriétés qui sont animées.
- animation: Propriété résumée définissant la plupart des paramètres d'animation : durée, fonction d'accélération, nombre de répétition, direction, etc.
- animation-composition: Définit comment interagissent plusieurs animations appliquées à la même propriété.
- animation-delay: Temps d'attente avant le démarrage de l'animation, à compter le plus souvent du chargement de la page.
- animation-direction: Définit le sens de l'animation (normal ou inverse) par rapport à la directive
@keyframes. - animation-duration: Définit la durée totale d'un cycle d'animation.
- animation-fill-mode: Définit le remplacement lorsque l'animation n'est pas en cours d'exécution.
- animation-iteration-count: Définit le nombre de fois qu'une animation doit être jouée.
- animation-name: Définit quelle animation (définie par
@keyframes) appliquer à l'élément. - animation-play-state: Définit l'état de l'animation (en cours ou en pause).
- animation-range: Spécifie le point de départ et le point final de l'animation, dans le cas d'une animation pilotée par un défilement.
- animation-range-end: Spécifie le point final de l'animation, dans le cas d'une animation pilotée par un défilement.
- animation-range-start: Spécifie le point de départ de l'animation, dans le cas d'une animation pilotée par un défilement.
- animation-timeline: Associe l'animation à autre chose que le temps, par exemple le défilement d'un élément.
- animation-timing-function: Définit la fonction d'accélération à utiliser pendant une animation.
- scroll(): Facilite la mise en œuvre des animations pilotées par un défilement (Scroll Driven Animation).
- scroll-timeline: Propriété résumée définissant les paramètres d'une animation pilotée par la position d'une barre de défilement.
- 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.
- timeline-scope: Définit la portée d'une ligne de temps pour une animation pilotée par le défilement.
- view(): Définit une animation pilotée par un défilement (Scroll Driver Animation).
- view-timeline: Propriété résumée définissant les paramètres d'une animation en fonction de la visibilité d'un élément dans la fenêtre de défilement (animation pilotée par le défilement).
- view-timeline-axis: Définit quel axe (vertical ou horizontal) est utilisé par une animation pilotée par le défilement.
- view-timeline-inset: Spécifie un ajustement de la boite de défilement dans le cadre d'une animation pilotée par le défilement.
- view-timeline-name: Définit un identifiant pour une animation pilotée par le défilement.
Possibilité d'animation de la propriété scroll-timeline-name.
Il n'est pas possible d'animer la propriété scroll-timeline-name car elle participe à la définition des animations.
Support de scroll-timeline-name.
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).
Évolution de la propriété scroll-timeline-name.
-
Animations pilotées par un défilement - Niveau 1
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. La propriété scroll-timeline-name,
ainsi que toutes celles qui se rapporte au sujet sont également présentes dans ce module.