animation-range

有限可用性

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

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

animation-range CSS 简写属性 用于设置动画在其时间轴上的附件范围的开始和结束,即动画将在时间轴上的何处开始和结束。

组成属性

此属性是以下 CSS 属性的简写

语法

css
/* single keyword or length percentage value */
animation-range: normal; /* Equivalent to normal normal */
animation-range: 20%; /* Equivalent to 20% normal */
animation-range: 100px; /* Equivalent to 100px normal */

/* single named timeline range value */
animation-range: cover; /* Equivalent to cover 0% cover 100% */
animation-range: contain; /* Equivalent to contain 0% contain 100% */
animation-range: cover 20%; /* Equivalent to cover 20% cover 100% */
animation-range: contain 100px; /* Equivalent to contain 100px cover 100% */

/* two values for range start and end */
animation-range: normal 25%;
animation-range: 25% normal;
animation-range: 25% 50%;
animation-range: entry exit; /* Equivalent to entry 0% exit 100% */
animation-range: cover cover 200px; /* Equivalent to cover 0% cover 200px */
animation-range: entry 10% exit; /* Equivalent to entry 10% exit 100% */
animation-range: 10% exit 90%;
animation-range: entry 10% 90%;

animation-range 简写属性可以应用于容器元素,作为<animation-range-start><animation-range-end> 值的组合。如果同时指定两个值,则它们将按<animation-range-start> 然后<animation-range-end> 的顺序解释。

如上面语法块中的注释所示,如果只提供一个值,则有两种可能的解释

  • 如果该值是<length-percentage>normal,则<animation-range-start> 将取该值,而<animation-range-end> 将等于normal
  • 如果该值是命名的时轴范围,没有<length-percentage> 紧随其后,则该范围将介于该命名时轴范围在 0% 和 100% 之间。
  • 如果该值是命名的时轴范围,后面紧跟着<length-percentage>,则该范围将从该命名时轴范围和百分比开始,并在该命名时轴范围和 100% 结束。

一个或两个值表示animation-range-start 和/或animation-range-end。这些值可以是以下之一

normal

animation-range-start 的情况下表示时间轴的开始,在animation-range-end 的情况下表示时间轴的结束。这是默认值。

<长度百分比>

从时间轴开始测量的长度或百分比值。

<时轴范围名称>

整体时间轴内的特定命名时间轴范围。可能的值是

cover

表示命名视图进度时间轴的完整范围(有关详细信息,请参见CSS 滚动驱动的动画),从主题元素首次开始进入滚动端口的视图进度可见范围(0% 进度)到它完全离开它(100% 进度)的点。

contain

表示命名视图进度时间轴的范围,其中主题元素被滚动端口的视图进度可见范围完全包含,或完全包含滚动端口的视图进度可见范围。

  • 如果主题元素小于滚动端口,则它的范围从主题元素首次被滚动端口完全包含(0% 进度)的点开始,到它不再被滚动端口完全包含(100% 进度)的点结束。
  • 如果主题元素大于滚动端口,则它的范围从主题元素首次完全覆盖滚动端口(0% 进度)的点开始,到它不再完全覆盖滚动端口(100% 进度)的点结束。
entry

表示命名视图进度时间轴从主体元素开始进入滚动视窗(0% 进度)到完全进入滚动视窗(100%)的范围。

退出

表示命名视图进度时间轴从主体元素开始退出滚动视窗(0% 进度)到完全退出滚动视窗(100%)的范围。

进入交叉

表示命名视图进度时间轴从主体元素开始穿过滚动视窗的起始边缘(0% 进度)到完全穿过滚动视窗的起始边缘(100%)的范围。

退出交叉

表示命名视图进度时间轴从主体元素开始穿过滚动视窗的结束边缘(0% 进度)到完全穿过滚动视窗的结束边缘(100%)的范围。

对于不包含<长度百分比><时间轴范围名称>值,如果它是animation-range-start值,则百分比默认值为0%,如果它是animation-range-end值,则百分比默认值为100%

注意:从上面的描述中很难想象这些值是什么意思。幸运的是,视图时间轴范围可视化器以直观的视觉格式展示了它们的含义。

<时间轴范围名称> <长度百分比>

一个组合值,等于从指定命名时间轴范围的开始位置测量的指定百分比或距离,穿过该范围。

注意:滚动视窗(有关详细信息,请参阅滚动容器)区域被称为视图进度可见性范围,是命名视图进度时间轴动画的主体元素被认为可见的区域。默认情况下,这是滚动视窗的全部范围,但可以使用view-timeline-inset属性进行调整。

正式定义

初始值作为每个速记属性的属性
适用范围所有元素
继承
百分比如果指定了命名时间轴范围,则相对于该范围,否则相对于整个时间轴
计算值作为每个速记属性的属性
  • animation-range-start: 一个列表,其中每个项目可以是 'normal'、长度百分比,或者时间轴范围名称和长度百分比
  • animation-range-end: 一个列表,其中每个项目可以是 'normal'、长度百分比,或者时间轴范围名称和长度百分比
动画类型作为每个速记属性的属性

正式语法

animation-range = 
[ <'animation-range-start'> <'animation-range-end'>? ]#

<animation-range-start> =
[ normal | <length-percentage> | <timeline-range-name> <length-percentage>? ]#

<animation-range-end> =
[ normal | <length-percentage> | <timeline-range-name> <length-percentage>? ]#

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

示例

视图时间轴范围可视化器

查看视图时间轴范围可视化器,以获得对所有值类型的含义的清晰易懂的视觉解释。

使用范围创建命名视图进度时间轴

使用具有animation类的主题元素上的view-timeline属性定义名为--subjectReveal的视图进度时间轴。然后使用animation-timeline: --subjectReveal;将它设置为相同元素的时间轴。结果是,当主题元素向上滚动时,它会随着滚动向上移动而进行动画。

还设置了animation-range声明,以使动画比预期晚开始,早结束。

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: Arial, Helvetica, sans-serif;
}

h1 {
  font-size: 3rem;
}

p {
  font-size: 1.5rem;
  line-height: 1.5;
}

具有subject类的<div>也具有animation类——这是设置view-timeline以定义命名视图进度时间轴的地方。它还具有与该值相同的animation-timeline名称,以声明此将是随着视图进度时间轴的推移而进行动画的元素。我们还给它一个animation-range声明,以使动画比预期晚开始,早结束。

最后,在元素上指定了一个动画,该动画使其不透明度和比例发生动画,使其随着向上滚动而淡入并放大。

css
.animation {
  view-timeline: --subjectReveal block;
  animation-timeline: --subjectReveal;

  animation-name: appear;
  animation-range: entry 10% contain 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

浏览器兼容性

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

另请参阅