`View-timeline-axis` - Propriété CSS

view-timeline-axis

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

Description rapide

Définit quel axe (vertical ou horizontal) est utilisé par une animation pilotée par le défilement.

Statut

Standard

S'applique à

Tous les éléments.

Utilisable sur

HTML

Valeurs prédéfinies

block | inline | x | y

Pourcentages

Ne s'appliquent pas.

Valeur initiale

block

Héritée par défaut

Non.

Type d'animation

Not animable : la propriété view-timeline-axis ne peut pas être animée.

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

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

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

La propriété view-timeline-axis intervient dans le domaine des animations pilotées par le défilement (Scroll-Driven-Animation). Les animations pilotées par le défilement consiste à coupler le déroulement d'une animation au défilement d'un conteneur, plutôt qu'au temps comme c'est le cas habituellement. Plusieurs propriétés interviennent dans ce mécanisme dont la propriété view-timeline-axis qui définit laquelle des barres de défilement doit être utilisée.

C'est une propriété qui s'applique à l'élément animé.

Pour plus de renseignements sur les animations contrôlées par le défilement, reportez-vous à notre tutoriel sur les animations pilotées par un défilement.

Voici un exemple d'animation pilotée par le défilement. Le smiley reçoit toutes les propriété concernant l'animation :

animation pour indiquer à quelle animation on se réfère (ici une rotation).
view-timeline-name qui définit un identifiant pour cette animation pilotée par un défilement. Dans notre exemple, cet identifiant est --description1.
animation-timeline qui utilise cet identifiant.
view-timeline-axis qui définit que l'animation sera couplée à la barre horizontale (x).

Cet exemple ne fonctionne pas sur Firefox , à moins que vous n'ayez activé le flag layout.css.scroll-driven-animations.enabled.

En utilisant la barre de défilement horizontale, vous ferez apparaître un smiley, qui se mettra à tourner dès qu'il sera visible,
et terminera sa rotation au moment de disparaître à gauche de la fenêtre défilement.
La rotation du smiley est couplée à la barre de défilement horizontale.

⚽

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.

Tutoriel : animations pilotées par un défilement

animation-timeline :

Associe l'animation à autre chose que le temps, par exemple le défilement d'un élément.

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.

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.

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-inset :

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

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

Valeurs pour `view-timeline-axis`.

view-timeline-axis: block; view-timeline-axis: inline;

L'axe choisi pour piloter les animations est soit l'axe des blocs (vertical pour les langues latines), soit l'axe des lignes (horizontal pour les langues latines). Il s'agit donc de valeurs logiques, dépendantes de la langue.
view-timeline-axis: x; view-timeline-axis: y;

x et y désignent respectivement l'axe horizontal et l'axe vertical, indépendamment de la langue du document.
view-timeline-axis: horizontal ✗; view-timeline-axis: vertical ✗;

Ces deux valeurs sont obsolètes, et remplacées par les valeurs précédentes (x et y).
view-timeline-axis: initial; (block) view-timeline-axis: inherit; view-timeline-axis: revert; view-timeline-axis: revertLayer; view-timeline-axis: unset;

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

Exemple d'animation de `view-timeline-axis`.

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

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. L'animation choisie fait tourner la boussole.

view-timeline-axis :

block

inline

x

y

🧭

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

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-axis pour définir l'axe de défilement qui pilotera l'animation.

Propriété
view-timeline-axis

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

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

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