1. Web
  2. CSS
  3. animation-range-start

animation-range-start

可用性有限

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

animation-range-start CSS 屬性用於設定動畫在其時間軸上附件範圍的起點，即動畫將在時間軸上的哪個位置開始。

animation-range-start 和 animation-range-end 屬性也可以使用 animation-range 簡寫屬性來設定。

注意：animation-range-start 作為僅重置值包含在 animation 簡寫中。這意味著包含 animation 會將先前宣告的 animation-range-start 值重置為 normal，但不能透過 animation 設定特定值。建立 CSS 滾動驅動動畫時，您需要在宣告任何 animation 簡寫之後宣告 animation-range-start 才能使其生效。

語法

css
/* Keyword or length percentage value */
animation-range-start: normal;
animation-range-start: 20%;
animation-range-start: 100px;

/* Named timeline range value */
animation-range-start: cover;
animation-range-start: contain;
animation-range-start: cover 20%;
animation-range-start: contain 100px;

值

animation-range-start 的允許值為 normal、<length-percentage>、<timeline-range-name> 或帶有後續 <length-percentage> 的 <timeline-range-name>。有關可用值的詳細說明，請參閱 animation-range。

另請檢視 View Timeline Ranges Visualizer，它以簡單的視覺化格式準確顯示了不同值的含義。

正式定義

初始值normal
應用於所有元素
繼承性否
百分比如果指定了已命名時間軸範圍，則相對於該範圍；否則相對於整個時間軸。
計算值一個列表，其中每個專案可以是“normal”、長度百分比，或者時間線範圍名稱和長度百分比
動畫型別不可動畫化

正式語法

animation-range-start = 
  [ normal | <length-percentage> | <timeline-range-name> <length-percentage>? ]#  

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

示例

使用範圍開始建立命名檢視進度時間軸

在類名為 animation 的主體元素上，使用 view-timeline 屬性定義了一個名為 --subject-reveal 的檢視進度時間軸。然後使用 animation-timeline: --subject-reveal; 將其設定為同一元素的時間軸。結果是，當文件被滾動時，主體元素在向上移動的過程中會播放動畫。

animation-range-start 宣告也用於使動畫比預期更晚開始。

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

CSS

subject 元素及其包含的 content 元素僅應用了最少的樣式，文字內容則設定了一些基本的字型樣式。

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

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

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

h1 {
  font-size: 3rem;
}

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

帶有 subject 類的 <div> 也被賦予 animation 類——這是設定 view-timeline 以定義命名檢視進度時間軸的地方。它還被賦予一個具有相同值的 animation-timeline 名稱，以宣告這將是隨著檢視進度時間軸的推進而動畫的元素。我們還給它一個 animation-range-start 宣告，以使動畫比預期更晚開始。

最後，在元素上指定了一個動畫，該動畫使其不透明度和縮放發生變化，從而在它向上移動捲軸時淡入並變大。

css
.animation {
  view-timeline: --subject-reveal block;
  animation-timeline: --subject-reveal;

  animation-name: appear;
  animation-range-start: entry 25%;
  animation-fill-mode: both;
  animation-duration: 1ms; /* Firefox requires this to apply the animation */
}

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

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

結果

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

規範

規範
滾動驅動動畫
# animation-range-start

瀏覽器相容性

另見

幫助改進 MDN

瞭解如何貢獻

此頁面最後由 MDN 貢獻者 在 修改。

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