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.