View-timeline-name - Propriété CSS

Schéma de la syntaxe de view-timeline-name.

Description des termes utilisés sur le schéma :

• --id est un identifiant, librement choisi par l'utilisateur, mais qui doit commencer par un double tiret.

Description de la propriété view-timeline-name.

La propriété view-timeline-name concerne les animations pilotées par un défilement. Elle définit un identifiant pour l'élément qui sera le pilote de l'animation. Plus de détails sur les animations pilotées par un défilement.

Voici ce que peut donner une animation pilotée par le défilement. Le logo de Firefox reçoit à la fois les propriétés view-timeline-name pour définir l'identifiant --logo, et la propriété animation-timeline qui exploite cet identifiant.

En utilisant la barre de défilement de ce bloc vous pouvez faire apparaître le logo de Firefox. Dès que celui-ci est visible dans la fenêtre, il commence à tourner, pour terminer sa rotation lorsqu'il atteint lorsqu'il disparaît par le haut de la fenêtre.

Cet exemple ne fonctionne pas encore 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.

Valeurs pour view-timeline-name.

• view-timeline-name: none;

  L'élément ne pourra pas être utilisé pour piloter les animations. C'est la valeur initiale.

• view-timeline-name: --id;

  Cette syntaxe définit --id comme l'identifiant du pilote. Cet identifiant sera utilisable avec animation-timeline. L'identifiant peut être librement choisi par l'utilisateur, mais son nom doit obligatoirement commencer par un double tiret.

• view-timeline-name: --id1, --id2;

  Cette syntaxe, comportant plusieurs identifiants séparés par des virgules permet de définir autant de pilotes. On peut, par exemple, définir un pilote pour le défilement vertical, et un autre pour le défilement horizontal.

• view-timeline-name: initial; (none) view-timeline-name: inherit; view-timeline-name: revert; view-timeline-name: revertLayer; view-timeline-name: unset;

  Consultez les pages suivantes pour plus de détails : initial, inherit, revert, revert-layer, unset.

Exemples d'utilisation de la propriété view-timeline-name.

Exemple 1.

Voici un exemple d'animation contrôlée par le défilement, qui marche bien sur certains navigateurs et mal sur d'autres. Les éléments s'estompent avant de disparaître (propriété opacity). Bien sûr cela marcherait aussi avec des images au lieu de smileys.

Exemple d'animation de view-timeline-name.

Pas d'animation possible de cette propriété, car elle est elle même un des paramètres des animations.

Compatibilité des navigateurs avec view-timeline-name.

Sur Firefox   ls animations pilotées par le défilement (Scroll Driven Animations) sont désactivées par défaut. Elle peuvent être activée en modifiant la valeur du flag layout.css.scroll-driven-animations.enabled (accéder aux flags sur Firefox).

1

Propriété
view-timeline-name

Estimation de la prise en charge globale.

74%

Navigateurs 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

Opéra

Firefox pour Androïd

Chrome

Edge

Firefox

Androïd Brower

Chrome pour Androïd

KaiOS Browser

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Histoire de la propriété view-timeline-name.

• Animations pilotées par un défilement - Niveau 1

  Première présentation de la propriété view-timeline-name dans ce module de spécification réservée aux animation pilotées par le défilement.
  

  25 Octobre 2022

  Document de travail.

  

  

  

Voir aussi, concernant les animations pilotées par un défilement.

Le module Scroll-driven Animations contient toutes les définitions concernant les transitions d'affichage, dont la propriété view-timeline-name. Les définitions suivantes sont également décrites dans ce module.

Propriétés :

Fonctions :