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.