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

animation-range-end

可用性有限

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

animation-range-end CSS 屬性用於設定動畫在其時間軸上所附著範圍的結束點，即動畫將在時間軸上的哪個位置結束。

animation-range-end 和 animation-range-start 屬性也可以透過 animation-range 簡寫屬性進行設定。

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

語法

css
/* Keyword or length percentage value */
animation-range-end: normal;
animation-range-end: 80%;
animation-range-end: 700px;

/* Named timeline range value */
animation-range-end: cover;
animation-range-end: contain;
animation-range-end: cover 80%;
animation-range-end: contain 700px;

值

animation-range-end 的允許值包括 normal、<length-percentage>、<timeline-range-name>，或後面跟著 <length-percentage> 的 <timeline-range-name>。有關可用值的詳細說明，請參閱 animation-range。

另請檢視 檢視時間軸範圍視覺化工具，它以易於理解的視覺化格式精確展示了不同值的含義。

正式定義

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

正式語法

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

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

示例

建立帶有範圍結束點的命名檢視進度時間軸

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

animation-range-end 宣告也用於使動畫比預期提前結束。

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-end 宣告，以使動畫比預期提前結束。

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

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

  animation-name: appear;
  animation-range-end: contain 50%;
  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-end

瀏覽器相容性

另見

幫助改進 MDN

瞭解如何貢獻

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

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