AI 摘要：本文深入探讨了 CSS animation-timeline 属性中的 view() 函数，它允许开发者创建基于元素在滚动容器（scrollport）中可见性（visibility）的动画。文章通过一个图片轮播（carousel）示例，详细演示了如何结合传统 CSS 动画、关键帧（keyframes）和 view() 函数，实现元素进入/退出视图时的缩放、模糊等动态效果。此外，文章还比较了 view() 与 scroll() 函数的区别，并介绍了 view() 函数的轴（axis）和插入（inset）参数，以及 animation-range 属性，帮助读者更精细地控制动画的触发时机和范围，为制作交互式滚动动画提供了实用的指导。

1. view() 函数简介与核心概念
• animation-timeline 属性接受 view() 函数，实现基于元素可见性的动画。
• 类比 JavaScript 的 Intersection Observer，动画随元素进入和退出滚动视口（scrollport）而触发。
• 示例：图片轮播中，图片在中间时清晰放大，在边缘时模糊缩小。
2. 搭建基本布局
• 创建一个 <main> 元素作为 carousel 容器。
• 使用 flexbox 使图片横向排列，并设置 overflow-x: auto 实现滚动。
• 定义 carousel-slide 元素作为图片项，设置其宽度为容器的 1/3，实现一次显示三张图片。
3. 实现滚动与滚动捕捉（Scroll Snapping）
• 在 carousel 容器上设置 scroll-snap-type: x mandatory 实现滚动捕捉。
• 使用 scroll-behavior: smooth 实现平滑滚动（可选）。
• 设置 scrollbar-width: none 隐藏滚动条（可选）。
• 为 carousel-slide 设置 scroll-snap-align: center，确保图片居中对齐。
4. 创建基于视图的动画
• 定义 slide 关键帧动画，实现图片在不同阶段的缩放、圆角和模糊效果。
• 将 slide 动画应用于 carousel-slide 元素。
• 使用 animation-timeline: view(inline) 将动画绑定到元素的视图时间线。
• 强调 animation-timeline 需单独声明在 animation 速记属性之后，以避免被覆盖。
5. view() 与 scroll() 函数的比较
• view() 函数创建基于元素在容器中可见性的视图进度时间线，适用于元素特定的显示效果。
• scroll() 函数创建基于容器滚动位置的滚动进度时间线。
• view() 更适合实现当特定元素滚动到视口时触发的动画。
6. view() 函数的参数与 animation-range 属性
• view() 接受 axis （block, inline, x, y）和 inset 参数。
• inset 参数定义滚动视口边缘的偏移量，精确控制动画触发范围。
• animation-range 属性进一步控制动画的开始和结束点，可使用 entry、exit、cover、contain 等关键词。
• 示例：通过 inset 控制动画在元素从底部进入滚动视口时才开始。
7. 创意轮播动画拓展
• 鼓励探索更多 CSS 属性的动画可能性，如背景位置（background position）动画，创造独特的轮播效果。
• 提及注册 CSS 属性（registered CSS properties）可以使更多属性动画化。

CSS-Tricks

Creating Scroll-Based Animations in Full view() | CSS-Tricks

It’s not that hard to do! Preethi shows 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.