view-timeline-axis

Disponibilité limitée

Cette fonctionnalité n'est pas Compatible car elle ne fonctionne pas dans certains des navigateurs les plus utilisés.

La propriété CSS view-timeline-axis définit la direction de défilement à utiliser pour une chronologie de progression de la vue nommée.

Syntaxe

css

/* Valeurs de propriété logiques */
view-timeline-axis: block;
view-timeline-axis: inline;

/* Valeurs de propriété physiques */
view-timeline-axis: y;
view-timeline-axis: x;

/* Valeurs globales */
view-timeline-axis: inherit;
view-timeline-axis: initial;
view-timeline-axis: revert;
view-timeline-axis: revert-layer;
view-timeline-axis: unset;

Valeurs

<axis>: Définit la direction de défilement utilisée par la chronologie de progression de la vue. La valeur peut être l'un des mots-clés <axis> : block, inline, x ou y. La valeur par défaut est block.

Description

La propriété view-timeline-axis définit la direction, ou <axis>, des chronologies de progression de la vue nommées qui sont basées sur la boîte de l'élément.

Par défaut, les animations CSS @keyframes progressent le long de la chronologie par défaut basée sur le temps. Lorsque vous définissez la progression de l'animation avec une chronologie de progression de la vue, view-timeline-axis définit la direction qui contrôle la progression de la chronologie.

Pour les chronologies de progression de la vue, la progression de l'animation le long des chronologies est basée sur la visibilité de l'élément, ou sujet. La propriété view-timeline-axis est définie sur le sujet.

Le sujet doit être imbriqué à l'intérieur d'un élément défilable. Si l'élément défilable ne déborde pas de son conteneur dans la dimension de l'axe ou si le débordement est masqué ou coupé, aucune chronologie de progression de défilement ne sera créée.

La propriété view-timeline-axis, ainsi que les propriétés view-timeline-inset et view-timeline-name, fait partie de la propriété raccourcie view-timeline.

Définition formelle

Valeur initiale	`block`
Applicabilité	tous les éléments
Héritée	non
Valeur calculée	comme défini
Type d'animation	Non animable

Syntaxe formelle

view-timeline-axis = 
  [ block | inline | x | y ]#

Exemples

Définir l'axe de la chronologie de progression de la vue

Dans cet exemple, une chronologie de progression de la vue nommée --reveler-sujet est définie en utilisant la propriété view-timeline-name sur un élément sujet avec une classe « animation ». Cette chronologie est ensuite appliquée à l'animation sur le même élément, en utilisant animation-timeline: --reveler-sujet;.

Pour démontrer l'effet de view-timeline-axis, une barre de défilement horizontale (non par défaut) est utilisée dans cet exemple pour piloter l'animation.

HTML

Le HTML pour l'exemple est montré ci-dessous.

html

<div class="contenu">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua.
  </p>

  <p>
    Risus quis varius quam quisque id. Et ligula ullamcorper malesuada proin
    libero nunc consequat interdum varius. Elit ullamcorper dignissim cras
    tincidunt lobortis feugiat vivamus at augue.
  </p>

  <p>
    Dolor sed viverra ipsum nunc aliquet. Sed sed risus pretium quam vulputate
    dignissim. Tortor aliquam nulla facilisi cras.
  </p>

  <p>
    A erat nam at lectus urna duis convallis convallis. Nibh ipsum consequat
    nisl vel pretium lectus.
  </p>

  <p>
    Sagittis aliquam malesuada bibendum arcu vitae elementum. Malesuada bibendum
    arcu vitae elementum curabitur vitae nunc sed velit.
  </p>

  <div class="sujet animation"></div>

  <p>
    Adipiscing enim eu turpis egestas pretium aenean pharetra magna ac. Arcu
    cursus vitae congue mauris rhoncus aenean vel. Sit amet cursus sit amet
    dictum. Augue neque gravida in fermentum et. Gravida rutrum quisque non
    tellus orci ac auctor augue mauris.
  </p>
</div>

CSS

En CSS, nous définissons l'élément sujet comme source d'une chronologie de progression de la vue nommée --reveler-sujet avec la propriété view-timeline-name. L'axe de défilement est défini par view-timeline-axis: x;. Nous incluons également view-timeline-axis: horizontal; pour les navigateurs qui prennent en charge les valeurs héritées non standard horizontal et vertical, au lieu de x et y.

L'ancêtre contenu est rendu défilant horizontalement en disposant son contenu avec display: flex; et flex-flow: column wrap;.

css

.sujet {
  width: 300px;
  height: 200px;
  margin: 0 auto;
  background-color: deeppink;
}

.contenu {
  width: 50%;
  height: 400px;
  margin-top: 30px;
  display: flex;
  flex-flow: column wrap;
  gap: 10px;
}

p {
  font-family: "Helvetica", "Arial", sans-serif;
}

p {
  font-size: 1.3rem;
  line-height: 1.4;
}

.animation {
  view-timeline-name: --reveler-sujet;
  view-timeline-axis: x;
  view-timeline-axis: horizontal;

  animation: appear 1ms linear both;
  animation-timeline: --reveler-sujet;
}

@keyframes appear {
  from {
    opacity: 0;
    transform: scaleX(0);
  }

  to {
    opacity: 1;
    transform: scaleX(1);
  }
}

@layer no-support {
  body::before {
    display: block;
    text-align: center;
    padding: 1em;
  }
  @supports not (view-timeline-axis: inherit) {
    body::before {
      content: "Votre navigateur ne prend pas en charge la propriété `view-timeline-axis`.";
      background-color: wheat;
    }
  }
  @supports (view-timeline-axis: horizontal) {
    body::before {
      content: "Votre navigateur prend en charge les valeurs héritées pour la propriété `view-timeline-axis`.";
      background-color: yellow;
    }
  }
}

Résultat

Faites défiler la barre horizontale en bas pour voir l'élément sujet s'animer au fur et à mesure du défilement.

Spécifications

Spécification
Scroll-driven Animations # view-timeline-axis

Compatibilité des navigateurs

Voir aussi

La propriété animation-timeline
Les propriétés view-timeline, view-timeline-inset, view-timeline-name
La fonction view()
Guide : Chronologie de progression de la vue nommée CSS
Le module des animations pilotées par le défilement CSS
Le module des animations CSS

Aider à améliorer MDN

Apprendre à contribuer

Cette page a été modifiée le 4 avr. 2026 par les contributeur·ice·s du MDN.

Voir cette page sur GitHub • Signaler un problème avec ce contenu