view-timeline-axis

可用性有限

此特性不是基線特性，因為它在一些最廣泛使用的瀏覽器中不起作用。

view-timeline-axis CSS 屬性用於指定捲軸方向，該方向將用於為命名檢視進度時間軸動畫提供時間軸，該動畫基於元素（稱為主題）在可滾動元素（滾動器）中可見性的變化而進行。view-timeline-axis 在主題上設定。有關更多詳細資訊，請參閱CSS 滾動驅動動畫。

注意：如果滾動器元素在其軸維度上未溢位其容器，或者溢位被隱藏或剪裁，則不會建立滾動進度時間線。

view-timeline-axis、view-timeline-inset 和 view-timeline-name 屬性也可以使用view-timeline 簡寫屬性進行設定。

語法

css

/* Logical property values */
view-timeline-axis: block;
view-timeline-axis: inline;
/* Non-logical property values */
view-timeline-axis: y;
view-timeline-axis: x;

值

view-timeline-axis 允許的值是

block: 滾動器元素的塊軸上的捲軸，該軸的方向垂直於行內文字流。對於水平書寫模式（例如標準英語），這與 y 相同；對於垂直書寫模式，這與 x 相同。這是預設值。
inline: 滾動器元素的行內軸上的捲軸，該軸的方向平行於行內文字流。對於水平書寫模式，這與 x 相同；對於垂直書寫模式，這與 y 相同。
y: 滾動器元素的垂直軸上的捲軸。
x: 滾動器元素的水平軸上的捲軸。

正式定義

初始值	`block`
應用於	所有元素
繼承性	否
計算值	同指定值
動畫型別	不可動畫化

正式語法

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

示例

定義檢視進度時間軸的軸

在此示例中，使用具有類名為 "animation" 的主題元素上的 view-timeline-name 屬性定義了一個名為 --subject-reveal 的檢視進度時間軸。然後，使用 animation-timeline: --subject-reveal; 將此時間軸應用於同一元素上的動畫。

為了演示 view-timeline-axis 的效果，此示例使用水平（非預設）捲軸來驅動動畫。

HTML

示例的 HTML 如下所示。

html

<div class="content">
  <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="subject 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

在 CSS 中，我們使用 view-timeline-name 屬性將 subject 元素設定為名為 --subject-reveal 的檢視進度時間軸的源。滾動軸使用 view-timeline-axis: x; (Chromium) 和 view-timeline-axis: horizontal; (Firefox) 進行設定——這導致滾動祖先元素的水平捲軸位置決定動畫時間軸。

透過使用 display: flex; 和 flex-flow: column wrap; 對其內容進行佈局，使 content 祖先元素水平溢位。

另外值得注意的是，主題元素應用了 animation-duration，以便該示例在 Firefox 中也能正常工作。

css

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

.content {
  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: --subject-reveal;
  /* Chromium supports the new x/y syntax */
  view-timeline-axis: x;
  /* Firefox still supports the old horizontal/vertical syntax */
  view-timeline-axis: horizontal;

  animation-name: appear;
  animation-fill-mode: both;
  animation-timeline: --subject-reveal;
  animation-duration: 1ms; /* Firefox requires this to apply the animation */
}

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

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

結果

滾動底部的水平捲軸，檢視主題元素在您滾動時進行動畫。

規範

規範
滾動驅動動畫 # view-timeline-axis

瀏覽器相容性

另見

幫助改進 MDN

瞭解如何貢獻

此頁面最後由 MDN 貢獻者於 2025 年 10 月 13 日修改。

在 GitHub 上檢視此頁面 • 報告此內容的問題