CSS 滚动驱动动画 view-timeline-inset

news2024/11/26 19:51:06

view-timeline-inset
- 语法
- 例子🌰
  - 正
    - scroll-padding 为正
    - 正的 length
    - 正的 percentage
  - 负
    - scroll-padding 为负
    - 负的 length
    - 负的 percentage
- 兼容性

view-timeline-inset

在使用 view() 时说过, 元素在滚动容器的可见性推动了 view progress timeline 的进展. 默认情况是元素即将出现在滚动容器时, timeline 为 0%, 当 A 完全离开滚动元素时, timeline 为 100%.

有时我们想调整过程, 比如让时间线早点开始或者早点结束, 换句话就是元素从什么位置开始是可见的, 从什么位置之后是不可见的, 这时就是 view-timeline-inset 大放异彩的时候了.

语法

可以是一个值或两个值, 值可以是 auto, 长度值或百分比值.

auto: (默认值)即偏移量是 0. 有的浏览器可能使用启发式的方法决定默认值. 实际上 auto 使用的是 scroll-padding 的值, 但是 scroll-padding 默认为 0, 所以 auto 就默认为 0.
长度或百分比:
- 正值: 如果值是正数, 元素可见和不可见的边界就会从默认位置向内移动.
- 负值: 如果值是负数, 元素可见和不可见的边界就会从默认位置向外移动.
- 📖 如果是这种值, 就会覆盖 scroll-padding

如果是两个值, 那么第一个值是元素可见边界的偏移, 第二个值是元素不可见边界的偏移. 如果是一个值, 那么开始和结束位置的偏移都是它.

例子🌰

先来看默认, 也就是 auto 的情况.

.container {
  height: 200px;
  overflow: auto;
}
.box {
  animation: appear1 linear both;
  animation-timeline: view();
}
@keyframes appear1 {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

<div class="container">
  Lorem...
  <div class="box"></div>
  Lorem...
</div>

在这里插入图片描述

正

`scroll-padding` 为正

scroll-padding: 2em;

可以看到和前一个例子不同的是, 当元素出现 2em 后才开始动画, 到距离离开位置 2em 时动画就完成了

在这里插入图片描述

正的 `length`

.box {
  animation: appear1 linear both;
  /* animation-timeline: view(); */
  animation-timeline: --why-is-this;
  view-timeline: --why-is-this;
}
.positive-inset-length {
  view-timeline-inset: var(--length);
}