view-timeline-axis

Limited availability

此功能并非基线功能，因为它在一些最常用的浏览器中无法正常工作。

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

view-timeline-axis CSS 属性用于指定滚动条方向，该方向将用于为命名视图进度时间轴动画提供时间轴，该动画将根据可滚动元素（滚动器）内部元素（称为主题）的可视性变化进行推进。view-timeline-axis 设置在主题上。有关更多详细信息，请参阅CSS 滚动驱动动画。

注意: 如果滚动器元素在轴维度上没有超出其容器，或者如果溢出是隐藏的或被裁剪，则不会创建滚动进度时间轴。

view-timeline-axis 和view-timeline-name 属性也可以使用view-timeline 简写属性设置。

语法

css
/* Logical property values */
view-timeline-axis: block;
view-timeline-axis: inline;
/* Non-logical property values */
view-timeline-axis: y;
view-timeline-axis: x;

Values

view-timeline-axis 允许的值为

block

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

内联

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

y

滚动条元素垂直轴上的滚动条。

x

滚动条元素水平轴上的滚动条。

正式定义

初始值block
应用于所有元素
继承否
计算值如指定
动画类型不可动画

正式语法

view-timeline-axis = 
  [ block | inline | x | y ]#

示例

定义视图进度时间线的轴

在本例中，使用view-timeline-name属性在具有类“animation”的主题元素上定义了一个名为--subjectReveal的视图进度时间线。然后使用animation-timeline: --subjectReveal;将该时间线应用于相同元素上的动画。

为了演示view-timeline-axis的效果，本例中使用水平（非默认）滚动条来驱动动画。

HTML

示例的 HTML 代码如下所示。

html
<div class="content">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua.
  </p>

  <p>
    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.
  </p>

  <p>
    A erat nam at lectus urna duis convallis convallis. Nibh ipsum consequat
    nisl vel pretium lectus.
  </p>

  <p>
    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.
  </p>
</div>

CSS

在 CSS 中，我们使用view-timeline-name属性将subject元素设置为名为--subjectReveal的视图进度时间线的源。滚动轴使用view-timeline-axis: x;（Chromium）和view-timeline-axis: horizontal;（Firefox）设置 — 这会导致滚动祖先元素的水平滚动条位置决定动画时间线。

通过使用display: flex;和flex-flow: column wrap;布局其内容，使content祖先元素在水平方向上溢出。

还值得注意的是，主题元素应用了animation-duration，以便示例在 Firefox 中正常工作。

css
.subject {
  width: 300px;
  height: 200px;
  margin: 0 auto;
  background-color: deeppink;
}

.content {
  width: 50%;
  height: 400px;
  margin-top: 30px;
  display: flex;
  flex-flow: column wrap;
  gap: 10px;
}

p {
  font-family: Arial, Helvetica, sans-serif;
}

p {
  font-size: 1.3rem;
  line-height: 1.4;
}

.animation {
  view-timeline-name: --subjectReveal;
  /* Chromium supports the new x/y syntax */
  view-timeline-axis: x;
  /* Firefox still supports the old horizontal/vertical syntax */
  view-timeline-axis: horizontal;

  animation-name: appear;
  animation-fill-mode: both;
  animation-timeline: --subjectReveal;
  animation-duration: 1ms; /* Firefox requires this to apply the animation */
}

@keyframes appear {
  from {
    opacity: 0;
    transform: scaleX(0);
  }

  to {
    opacity: 1,
    transform: scaleX(1);
  }
}

结果

滚动底部的水平条，您会看到主题元素在您滚动时进行动画。

规范

规范
滚动驱动的动画
# view-timeline-axis

浏览器兼容性

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

另请参见