1. Web
  2. CSS
  3. animation-timeline
  4. view()

view()

可用性有限

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

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

函数参数可以指定时间轴进度将沿其跟踪的滚动条轴，以及调整主体被视为可见的框位置的内嵌值。

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

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

语法

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

参数

轴

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

block

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

inline

滚动容器的行内轴上的滚动条，该轴的方向平行于行内文本流。对于水平书写模式，这与 x 相同，而对于垂直书写模式，则与 y 相同。

y

滚动容器的垂直轴上的滚动条。

x

滚动容器的水平轴上的滚动条。

inset

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

start

从滚动视口开始处的向内偏移。

end

从滚动视口结束处的向内偏移。

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

正式语法

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

<axis> = 
  block   |
  inline  |
  x       |
  y       

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

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

示例

设置匿名视图进度时间轴

使用 animation-timeline: view() 在类名为 subject 的元素上设置匿名视图进度时间轴。结果是，当 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: 50%;
  align-items: end;
}

.bottom {
  bottom: 0;
  height: 10%;
}

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

结果

滚动以查看主体元素的动画效果。

规范

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

浏览器兼容性

另见

帮助改进 MDN

了解如何贡献

此页面由 MDN 贡献者 于 修改。

在 GitHub 上查看此页面 • 报告此内容的问题
© . Content available under a Creative Commons license.