View-timeline - Propriété CSS

view-timeline
view-timeline-axis
view-timeline-name

Résumé des caractéristiques de la propriété view-timeline

Description rapide
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).
Statut
Standard
S'applique à
Tous les éléments.
Utilisable sur
HTML
Pourcentages
Ne s'appliquent pas.
Valeur initiale
Voir les propriétés individuelles.
Héritée par défaut
Non.
Type d'animation
Not animable : la propriété view-timeline ne peut pas être animée.
Module W3C
Animations pilotées par un défilement
Références (W3C)
Statut du document: WD (document de travail)

Description de la propriété .

view-timeline est une propriété résumée équivalente aux deux propriétés suivantes :

  • view-timeline-name : Définit un identifiant pour une 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.

Ces trois propriétés concernent les animations pilotées par un défilement. Elles définissent quel élément et quel axe (horizontal ou vertical) seront le pilote de l'animation. Plus de détails sur les animations pilotées par un défilement.

Voici comment s'utilisent ces propriétés :

  • L'élément numéro 1 est un conteneur permettant le défilement de son contenu (propriété overflow avec la valeur scroll ou auto.
  • L'élément numéro 2 défile dans le conteneur n° 1. C'est sur cet élément que sera défini le pilote de l'animation, et l'animation :
    Son nom est défini par view-timeline-name,
    Et l'axe utilisé par view-timeline-axis,
    (ces deux paramètres peuvent également être fixés en une seule écriture avec la propriété résumée view-timeline). La propriété animation-timeline définit le pilote à utiliser.
  • Les éléments 3 et 4 sont des descendants de l'élément 2. Ils peuvent être également animés suivant le pilote qui vient d'être défini.

Utilisation de view-timeline

Voici ce que ça donne sur un exemple. L'élément bleu ciel (ID = description1a) est inclus dans un conteneur défilant (ID = description1). Sa largeur est animée. Cet élément est donc à la fois le pilote de l'animation et l'élément animé. En faisant défiler le contenu, vous verrez changer la largeur de l'élément bleu ciel (l'exemple en fonctionne pas encore sur Firefox  ).

id="description1"
id="decription1b"

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.

Gestion des débordements, lorsque le contenu est trop grand pour les dimensions imposées à l'élément. Avec la valeur scroll ou auto sur le conteneur défilant.
Associe l'animation à autre chose que le temps, par exemple le défilement d'un élément.
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.
Propriété résumée définissant les paramètres d'une animation pilotée par la position d'une barre de défilement.
Définit la portée d'une ligne de temps pour une animation pilotée par le défilement.
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).
Spécifie un ajustement de la boite de défilement dans le cadre d'une animation pilotée par le défilement.
Facilite la mise en œuvre des animations pilotées par un défilement (Scroll Driven Animation).
Définit une animation pilotée par un défilement (Scroll Driver Animation).

Valeurs pour view-timeline.

  • view-timeline: none;

    L'élément n'est pas ou n'est plus un pilote pour les animations.

  • view-timeline: --id block;

    Cette syntaxe définit l'identifiant --id pour un pilote d'ranimation suivant l'axe de blocs. C'est en fait un cumul des syntaxes de view-timeline-name et view-timeline-axis.

  • view-timeline: --id1 block, --id2 inline;

    Plusieurs définitions peuvent se succéder, en les séparant par des virgules.

  • view-timeline: initial; view-timeline: inherit; view-timeline: revert; view-timeline: revertLayer; view-timeline: unset;

    Les valeurs communes sont présentées sur ces pages : initial, inherit, revert, revert-layer, unset.

Exemple d'animation de view-timeline.

Pas d'animation possible de ces trois propriétés, car elles sont elles mêmes des paramètres des animations.

Exemple interactif avec la propriété view-timeline.

Le simulateur permet de choisir la valeur pour view-timeline-axis. La valeur de view-timeline-name est fixée à --demo et n'est pas modifiable.

view-timeline-axis :
⚽

Compatibilité des navigateurs avec view-timeline.

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).

Colonne 1
Support de la propriété view-timeline pour définir un pilote d'animation pilotée par un défilement.
Colonne 2
Support de la propriété view-timeline-name pour définir le nom du pilote.
Colonne 3
Support de la propriété view-timeline-axis pour définir l'axe de défilement qui pilotera l'animation.

Remarques :

(1) Désactivé par défaut. Peut être activé en positionnant le flag layout.css.scroll-driven-animations.enabled sur true.

1
Propriété
view-timeline
2
Propriété
view-timeline-name
3
Propriété
view-timeline-axis
Estimation de la prise en charge globale.
74%
74%
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

1

Androïd Brower

Chrome pour Androïd

KaiOS Browser

Opéra mini

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

Histoire de la propriété view-timeline.

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

Le module Animations pilotées par un défilement contient toutes les définitions concernant les transitions d'affichage, dont la propriété view-timeline. Les définitions suivantes sont également décrites dans ce module.

Propriétés :

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.
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-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.

Fonctions :

scroll()
Facilite la mise en œuvre des animations pilotées par un défilement (Scroll Driven Animation).
⚠
view()
Définit une animation pilotée par un défilement (Scroll Driver Animation).