在全视图中创建基于滚动的动画()
The CSS animation-timeline property accepts a view() function which, in turn, returns a timeline of how much of an element is visible in the part of a scroll container that’s viewable (formally known as a scrollport). In other words, rather than letting an animation run a linear progression based on how much time has elapsed, view() runs animations based on the visibility of the animated element within a scrollport.
CSS animation-timeline 属性接受一个 view() 函数，该函数返回一个时间线，表示元素在可视部分的滚动容器中可见的程度（正式称为 滚动区域）。换句话说，与其让动画基于经过的时间线性进行，不如让 view() 根据动画元素在滚动区域内的可见性来运行动画。
I like to equate it as the CSS version of JavaScript’s Intersection Observer. We can run an animation on an element as that element enters and exits the scrollport.
我喜欢将其比作JavaScript的Intersection Observer的CSS版本。我们可以在元素进入和退出滚动区域时运行动画。
Here’s an example:
这是一个例子：
Pretty neat, right? Depending on where an image is in the scrollable carousel, it goes from small and blurry at the far sides while getting larger and clearer when it hits the center. We have a little scroll snapping in there as well to make sure each image item makes a stop.
很不错，对吧？根据图像在可滚动轮播中的 位置，它在两侧时会变得小而模糊，而当它到达中心时会变得更大更清晰。我们还在其中加入了一点 滚动捕捉，以确保每个图像项都能停下来。
It’s not that hard to do! I’ll show you how it’s really the same old animation you’re used to writing in CSS, only applied on a view timeline instead of a normal timeline.
这并不难做到！我将向你展示这实际上是你习惯于在CSS中编写的老动画，只是应用在视图时间线上，而不是常规时间线上。
All I’m making here is an element I’m calling .carousel:
我在这里创建的只是一个我称之为.carousel的元素：
<main class="carousel"> </main>
The elements in .carousel will lay out in a single row, which is a one-liner with flexbox. We’ll also make sure that any content overflowing its space is scrollable:
.carousel 中的元素将以单行布局，这是一行代码的 flexbox。我们还将确保任何溢出其空间的内容是可滚动的：
.carousel { display: flex; width: max(480px, 50vw); overflow-x: auto;
}
And, of course, we need items in it that we can scroll around. A set of image slides.
当然，我们需要一些可以滚动的项目。一组图片幻灯片。
<main class="carousel"> <div class="carousel-slide"> </div> <div class="carousel-slide"> <img src="image-1.jpeg"...