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

scroll-timeline-axis

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

Description rapide

Indique suivant quel axe (vertical ou horizontal) doit se synchroniser l'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é scroll-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)

Syntaxe de `scroll-timeline-axis` (schéma).

Schéma syntaxique de la propriété scroll-timeline-axis.
Détails sur les valeurs.

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

Les animations CSS sont habituellement pilotées par le temps, mais un nouveau type d'animation, les animations pilotées par le défilement, permettent d'associer l'animation à une barre de défilement.

La propriété scroll-timeline-axis 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 laquelle des deux barres de défilement sera utilisée pour piloter l'animation.

Voici à quoi ressemble une animation pilotée par le défilement. 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 , à moins d'activer le flag layout.css.scroll-driven-animations.enabled.

Exemple d'animation pilotée par le défilement

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

Prise en charge de la langue.

La propriété comporte des valeurs insensibles au mode d'écriture (x et y), et d'autres qui y sont sensibles (inline et block). Utilisez celles qui correspondent le mieux à votre application.

x

La direction et le sens d'écriture de ce texte s'adaptent à la langue choisie.

y

Valeurs pour `scroll-timeline-axis`.

scroll-timeline-axis: block; scroll-timeline-axis: inline;

Définit quel est le défilement qui pilotera les animations. block et inline sont deux valeurs dépendantes de la direction et du sens d'écriture, donc dépendantes de la langue du document. Pour les langues latines, block correspond au défilement vertical, et inline au défilement horizontal.
La valeur initiale est block.
scroll-timeline-axis: x; scroll-timeline-axis: y;

Définit quel est le défilement qui pilotera les animations. x correspond au défilement horizontal, et y au défilement vertical, quelque soit la langue du document.
scroll-timeline-axis: x, block;

Plusieurs valeurs peuvent être cites, séparées par des virgules. C'est utile lorsque la propriété scroll-timeline-name a elle même reçu plusieurs valeurs.
scroll-timeline-axis: horizontal ✗; scroll-timeline-axis: vertical ✗;

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

Liens vers la présentation de ces différentes valeurs : initial, inherit, revert, revert-layer, unset.

Exemples avec la propriété `scroll-timeline-axis`.

Exemple 1.

Dans l'exemple ci-après, l'aiguille indiquer où en est le déplacement horizontal. Bien sûr cela fonctionnerait avec des images, plutôt que des smileys. La graduation est une image d'arrière-plan, et l'aiguille est en position sticky.

😀 😂 😃 😄 😅 😞 😟 😡 😢 😦 😨 😬 😭 😰 😱 😸 😹 😺 😻 🙀

Possibilité d'animation de la propriété `scroll-timeline-axis`.

La propriété scroll-timeline-axis ne s'anime pas, car elle participe à la définition des animations.

Simulateur avec la propriété `scroll-timeline-axis`.

Le simulateur permet de choisir une valeur pour scroll-timeline-axis. La valeur de scroll-timeline-name est déjà définie et une animation pilotée par le défilement (une rotation) est appliquée à l'image du ballon.

scroll-timeline-axis :

block

inline

x

y

Support de `scroll-timeline-axis`.

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

Colonne 1

Support de la propriété scroll-timeline-axis : définition de l'axe utilisé pour piloter les animations.

Remarques :

(1) Après activation, supporte les valeurs non standards horizontal et vertical.

Propriété
scroll-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

Chrome

Opéra

Edge

Chrome pour Androïd

Firefox pour Androïd

Firefox

Androïd Brower

KaiOS Browser

Opéra mini

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

Caniuse

Évolution de la propriété `scroll-timeline-axis`.

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

Concernant scroll-timeline-axis.

25 Octobre 2022
Document 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 Animations pilotées par un défilement. La propriété scroll-timeline-axis, ainsi que toutes celles qui se rapporte au sujet sont également présentes 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