1. Web
  2. CSS
  3. view-timeline-axis

view-timeline-axis

可用性有限

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

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

注意：如果滚动器元素在其轴维度上未溢出其容器，或者溢出被隐藏或剪裁，则不会创建滚动进度时间线。

view-timeline-axis、view-timeline-inset 和 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;

值

view-timeline-axis 允许的值是

block

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

inline

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

y

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

x

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

正式定义

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

正式语法

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

示例

定义视图进度时间轴的轴

在此示例中，使用具有类名为 "animation" 的主题元素上的 view-timeline-name 属性定义了一个名为 --subject-reveal 的视图进度时间轴。然后，使用 animation-timeline: --subject-reveal; 将此时间轴应用于同一元素上的动画。

为了演示 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 元素设置为名为 --subject-reveal 的视图进度时间轴的源。滚动轴使用 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: "Helvetica", "Arial", sans-serif;
}

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

.animation {
  view-timeline-name: --subject-reveal;
  /* 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: --subject-reveal;
  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

浏览器兼容性

另见

帮助改进 MDN

了解如何贡献

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

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