1. Web
  2. CSS
  3. animation-timeline
  4. view()

view()

可用性有限

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

view() CSS 函式可與 animation-timeline 配合使用，以指示提供匿名檢視進度時間軸以進行動畫的主體元素。檢視進度時間軸透過主體元素在最近的祖先滾動器中可見性的變化而推進。跟蹤主體在滾動器中的可見性——預設情況下，當主體首次在滾動器的一側可見時，時間軸為 0%，當它到達另一側時，時間軸為 100%。

函式引數可以指定時間軸進度將沿其跟蹤的捲軸軸，以及調整主體被視為可見的框位置的內嵌值。

注意：如果指示的軸不包含捲軸，則動畫時間軸將不活動（進度為零）。

注意：每次使用 view() 都對應於 Web 動畫 API 中 ViewTimeline 的一個獨特例項。

語法

css
/* Function with no parameters set */
animation-timeline: view();

/* Values for selecting the axis */
animation-timeline: view(block); /* Default */
animation-timeline: view(inline);
animation-timeline: view(y);
animation-timeline: view(x);

/* Values for the inset */
animation-timeline: view(auto); /* Default */
animation-timeline: view(20%);
animation-timeline: view(200px);
animation-timeline: view(20% 40%);
animation-timeline: view(20% 200px);
animation-timeline: view(100px 200px);
animation-timeline: view(auto 200px);

/* Examples that specify axis and inset */
animation-timeline: view(block auto); /* Default */
animation-timeline: view(inline 20%);
animation-timeline: view(x 200px auto);

引數

軸

捲軸軸值可以是以下任意一個

block

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

inline

滾動容器的行內軸上的捲軸，該軸的方向平行於行內文字流。對於水平書寫模式，這與 x 相同，而對於垂直書寫模式，則與 y 相同。

y

滾動容器的垂直軸上的捲軸。

x

滾動容器的水平軸上的捲軸。

inset

內嵌值可以是一個或兩個值，可以是 auto 或 <length-percentage>。它指定了 滾動視口 的內嵌（正）或外嵌（負）調整。內嵌用於確定元素是否在檢視中，這決定了動畫時間軸的長度。換句話說，動畫持續的時間與元素在內嵌調整的檢視中持續的時間一樣長。

start

從滾動視口開始處的向內偏移。

end

從滾動視口結束處的向內偏移。

注意：滾動器和內嵌值可以按任意順序指定。

正式語法

<view()> = 
  view( [ <axis> || <'view-timeline-inset'> ]? )  

<axis> = 
  block   |
  inline  |
  x       |
  y       

<view-timeline-inset> = 
  [ [ auto | <length-percentage> ]{1,2} ]#  

<length-percentage> = 
  <length>      |
  <percentage>

示例

設定匿名檢視進度時間軸

使用 animation-timeline: view() 在類名為 subject 的元素上設定匿名檢視進度時間軸。結果是，當 subject 元素向上滾動文件時，它會進行動畫。

HTML

示例的 HTML 如下所示。

html
<div class="content">
  <h1>Content</h1>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. 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. A erat nam at lectus urna
    duis convallis convallis. Nibh ipsum consequat nisl vel pretium lectus.
    Sagittis aliquam malesuada bibendum arcu vitae elementum. Malesuada bibendum
    arcu vitae elementum curabitur vitae nunc sed velit.
  </p>

  <div class="subject-container">
    <div class="subject animation"></div>
  </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. Risus quis varius quam quisque id diam
    vel quam elementum. Nibh praesent tristique magna sit amet purus gravida
    quis. Duis ultricies lacus sed turpis tincidunt id aliquet. In egestas erat
    imperdiet sed euismod nisi. Eget egestas purus viverra accumsan in nisl nisi
    scelerisque. Netus et malesuada fames ac.
  </p>
</div>
<div class="overlay top">inset start 50%</div>
<div class="overlay bottom">inset end 10%</div>

CSS

subject 元素和 content 元素經過最小化樣式設定，文字內容也給出了一些基本的字型設定

css
.subject {
  width: 300px;
  height: 200px;
  background-color: deeppink;
}

.content {
  width: 75%;
  max-width: 800px;
  margin: 0 auto;
}

p {
  font-size: 1.5rem;
  line-height: 1.8;
}

為了幫助理解結果，使用了額外的元素 subject-container、top 和 bottom。subject-container 顯示動畫的邊界。半透明的 top 和 bottom 疊加層標記了內嵌偏移的滾動視口。

css
.subject-container {
  border: 2px dashed black;
  width: 300px;
  margin: 0 auto;
}

.overlay {
  position: fixed;
  width: 100%;
  background-color: #f5deb3aa;
  display: flex;
  font-size: 1.2rem;
  font-weight: bold;
  color: red;
  justify-content: flex-end;
}

.top {
  top: 0;
  height: 50%;
  align-items: end;
}

.bottom {
  bottom: 0;
  height: 10%;
}

在以下程式碼中，類名為 subject 的 <div> 也被賦予了類名 animation。grow 動畫使 subject 元素變大或變小。animation-timeline: view(block 55% 10%) 設定為宣告它將在其滾動祖先（在本例中為文件的根元素）提供的檢視進度時間軸中進行動畫。

向下滾動時，請注意 50% 10% 的內嵌值如何導致動畫從底部 10% 處開始，並在頂部 50% 處結束。當動畫沿時間軸向前移動時，subject 會變大。相反，向上滾動時，動畫向相反方向進行，從頂部 50% 處開始，向後移動透過動畫，並在底部 10% 處結束。因此，當動畫向後發生時，subject 會縮小。

一個重要的點要記住，動畫持續的時間與 subject 元素在已設定並使用 50% 10% 內嵌值偏移的檢視中持續的時間一樣長。

css
.animation {
  animation-timeline: view(block 50% 10%);

  animation-name: grow;
  animation-fill-mode: both;
  animation-duration: 1ms; /* Firefox requires this to apply the animation */
  animation-timing-function: linear;
}

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

  to {
    transform: scaleX(1);
  }
}

結果

滾動以檢視主體元素的動畫效果。

規範

規範
滾動驅動動畫
# view-notation

瀏覽器相容性

另見

幫助改進 MDN

瞭解如何貢獻

此頁面由 MDN 貢獻者 於 修改。

在 GitHub 上檢視此頁面 • 報告此內容的問題
© . Content available under a Creative Commons license.