时间轴动画

Introduction

• 元素的动画效果由容器的滚动 scroll() 或视口 view() 触发

animation-timeline: none | auto | scroll() | view();

• animation-timeline 应在动画 animation 定义后面给出
• 不用指定动画时间 animation-duration
• 通常指定 animation-fill-mode 为 both
• 使用线性 linear、交互 alternate 和双向填充模式 both 能更好观察动画的变换过程
• 更多信息，请访问 MDN - animation-timeline 、timeline-scope 、scroll-timeline 、view-timeline

• 动画由原始视口或经过调整大小的视口 view 触发
• 元素在屏幕/视口可见时才触发

  animation happens only when the element is visible on the screen

• 元素进入视口，动画开始播放

  by default, the timeline is at 0% when the subject is first visible at one edge of the scroller

• 元素到达视口顶部，动画结束播放

  and 100% when it reaches the opposite edge.

Syntax

• 调整视口范围：使用 正值内收 视口范围或使用 负值外扩 视口范围

animation-timeline: view(start end);

• start：Inward offset from beginning of the scrollport. default 0
• end：Inward offset from end of the scrollport. default 0
• 内收的开始 start 和结束 end 顺序任意，系统会自动判定动画的时间轴区域

  The scroller and inset values can be specified in any order.

Cases

1. 通常取值 view(50% 10%)

   While scrolling down, start at 10% from the bottom and finish at 50% from the top

   Conversely, scrolling up, the animation proceeds in the reverse direction, starting at 50% from the top, moving backward through the animation, and ending at 10% from the bottom

• 当前元素的动画效果由最近 nearest 的容器或根容器 root 的滚动触发
• 容器应该有滚动条

• 使用的动画定义如下

@keyframes --windmill {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

• 使用默认容器 nearest

.windmill {
  animation-name: --windmill;
  animation-timing-function: linear;
  animation-timeline: scroll();
}

• 使用根容器 root

.windmill {
  animation-name: --windmill;
  animation-timing-function: linear;
  animation-timeline: scroll(root);
}