View-timeline-inset - Propriété CSS

view-timeline-inset

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

Description rapide

Spécifie un ajustement de la boite de défilement dans le cadre d'une animation pilotée par le défilement.

Statut

Standard

S'applique à

Tous les éléments.

Utilisable sur

HTML

Valeurs prédéfinies

auto

Pourcentages

Calculés par rapport à la dimension correspondante de la boite de défilement.

Valeur initiale

auto

Héritée par défaut

[none]

Type d'animation

[calcul]

Module W3C

Animations pilotées par un défilement

Références (W3C)

Scroll-driven Animations - Level 1

Statut du document: WD (document de travail)

Schéma de la syntaxe de `view-timeline-inset`.

Schéma syntaxique de la propriété view-timeline-inset.
Cliquez sur les liens du schéma pour plus de précisons sur les valeurs.

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

length est une valeur numérique suivie d'une des unités de dimension.
% est un pourcentage dont l'évaluation correspond à une dimension.

Description de la propriété `view-timeline-inset`.

La propriété view-timeline-inset intervient dans le cadre des animations pilotées par le défilement (Scroll Driver Animations). Ces animations se déroulent tant qu'un élément est visible dans une fenêtre de défilement. L'avancement de l'animation étant déterminé par la position de cet élément dans la fenêtre de défilement.
La propriété view-timeline-inset détermine la portion de la fenêtre qui sera utilisé pour piloter le défilement.

Le premier exemple ci-dessous illustre, pour le premier, une animation pilotée par le défilement sur toute la fenêtre de défilement, et, pour le deuxième, sur une partie seulement de cette fenêtre. Manipulez les barres de défilement pour voir tourner l'élément en bleu.
Comme avec les autres propriétés relatives aux animations pilotées par le défilement, cela ne fonctionnera pas avec Firefox.

L'animation se déroule sur toute la fenêtre de défilement.

L'animation se déroule sur une partie seulement de la fenêtre de défilement.

Valeurs pour `view-timeline-inset`.

view-timeline-inset: auto;

Valeur initiale. Toute la fenêtre de défilement est utilisée pour piloter l'animation, un changement de la couleur d'arrière-plan, du bleu au rouge.

view-timeline-inset:auto;
view-timeline-inset: 50px;

Il s'agit d'une valeur numérique négative ou positive, suivie d'une unités de dimension, ou d'un pourcentage, qui sera calculés par rapport à la longueur de la fenêtre de défilement, dans le sens du défilement.

Les valeurs positives elle correspondent à une réduction de la zone de défilement.
Les valeurs négatives à un agrandissement.

Cette valeur définit une zone, au début et à la fin de la fenêtre de défilement qui n'agit pas sur l'animation.

Dans l'exemple ci-dessous, cette zone est en gris. On voit que l'animation commence lorsque l'élément est visible, même partiellement, entre les zones grises, et se termine lorsque l'élément a complètement disparu. L'élément est dans sa couleur bleu ciel tant qu'il est dans la zone grise. Lorsque l'animation commence, il devient bleu et passe progressivement au rouge.

view-timeline-inset:50px;

La valeur prise lorsque l'élément est dans la zone définie par view-timeline-inset dépend de la propriété animation-fill-mode.
- none : la valeur est déterminée par les autres propriétés associées à cet élément. Dans notre exemple la couleur est bleu ciel.
- forwards : la valeur de fin de l'animation est utilisée lorsque l'animation est terminée. Dans notre exemple, il s'agit du rouge.
- backwards : la valeur au début de l'animation est utilisée avant que l'animation ne démarre. Dans notre exemple, c'est le bleu.
- both : les deux valeurs sont utilisées.
view-timeline-inset:50px;
animation-fill-mode:backwards;

view-timeline-inset:50px;
animation-fill-mode:forwards;

view-timeline-inset:50px;
animation-fill-mode:both;
view-timeline-inset: 30px 50px;

Il et possible de distinguer le début et la fin de la zone, avec des valeurs différentes. Si une seule valeur est précisée (comme dans l'exemple précédent), les deux valeurs sont réputées égales.

L'attribution de la première valeur et de la deuxième valeur n'est pas forcément intuitif.

view-timeline-inset:30px 50px;
view-timeline-inset: initial; (auto) view-timeline-inset: inherit; view-timeline-inset: revert; view-timeline-inset: revertLayer; view-timeline-inset: unset;

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

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

view-timeline-inset :

auto

Compatibilité des navigateurs avec `view-timeline-inset`.

Colonne 1

Prise en charge de la propriété view-timeline-inset pour spécifier un ajustement de la boite de défilement, dans le cadre d'animations pilotées par un défilement.