view()

可用性有限

此功能不是基线功能，因为它在一些最广泛使用的浏览器中不起作用。

实验性： 这是一个实验性技术
在生产环境中使用此功能之前，请仔细查看浏览器兼容性表格。

可以使用 view() CSS 函数与 animation-timeline 配合使用，以指示一个主题元素，该元素将提供一个匿名的视图进度时间轴来进行动画。视图进度时间轴通过最近的祖先滚动器内部主题元素的可见性变化来推进。滚动器内主题的可见性会被跟踪——默认情况下，当主题首先在滚动器的一端可见时，时间轴为 0%，当它到达另一端时，时间轴为 100%。

函数参数可以指定将跟踪时间轴进度的滚动条轴以及调整主题被视为可见的盒子位置的内边距。

注意：如果指示的轴不包含滚动条，则动画时间轴将处于非活动状态（进度为零）。

注意：每个 view() 的使用对应于 ViewTimeline 在 Web 动画 API 中的唯一实例。

语法

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);

参数

axis

滚动条轴值可以是以下任何一个

block: 滚动容器的块轴上的滚动条，即垂直于一行中文本流方向的轴。对于水平书写模式（如标准英语），这与 y 相同，而对于垂直书写模式，则与 x 相同。这是默认值。
inline: 滚动容器的内联轴上的滚动条，即平行于一行中文本流方向的轴。对于水平书写模式，这与 x 相同，而对于垂直书写模式，则与 y 相同。
y: 滚动容器的垂直轴上的滚动条。
x: 滚动容器的水平轴上的滚动条。

inset

内嵌值可以是一个或两个值，可以是auto或一个<length-percentage>。它指定了视口的内嵌（正数）或外嵌（负数）调整。内嵌用于确定元素是否在视野中，这决定了动画时间线的长度。换句话说，动画持续的时间与元素在经过内嵌调整的视野中的时间一样长。

开始: 从视口开始处的内向偏移。
结束: 从视口结束处的内向偏移。

注意：滚动器和内嵌值可以以任何顺序指定。

正式语法

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

<axis> = 
  block   |
  inline  |
  x       |
  y       

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

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

示例

设置匿名视口进度时间线

匿名视口进度时间线是在具有subject类的元素上使用animation-timeline: view()设置的。结果是，当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: 244px;
  align-items: end;
}

.bottom {
  top: 432px;
  height: 48px;
}

在以下代码中，类名为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);
  }
}

结果

滚动查看 subject 元素的动画效果。

规范

规范
滚动驱动的动画 # view-notation

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。