在前一篇文档中，我们详细介绍了 view-transition-class 属性。实际上，CSS中还存在另一套完整的视图驱动体系 —— 视图进度时间线（View Progress Timeline），以及视图过渡体系中的其他核心属性。本文将对 views-* 家族中除 view-transition-class 外的所有属性进行系统梳理，帮助您全面掌握CSS视图驱动动画与过渡效果。
一、视图进度时间线体系
视图进度时间线是CSS滚动驱动动画（Scroll-driven Animations）的核心概念。它允许元素的动画进度与元素在滚动容器中的可见程度相关联——当元素滚动进入视野时开始动画，离开视野时结束动画。
这一体系包含以下四个属性：view-timeline、view-timeline-name、view-timeline-axis、view-timeline-inset。
1.1 view-timeline-name
核心概念
view-timeline-name 属性用于为视图进度时间线 赋予一个唯一的标识名称，使其可以被动画元素通过 animation-timeline 属性引用。
语法与值
/* 默认值 - 不命名 */
view-timeline-name: none;
/* 命名示例 - 必须以--开头 */
view-timeline-name: --card-reveal;
view-timeline-name: --sectionFadeIn;
view-timeline-name: --gallery_zoom;初始值：none。
适用范围：所有元素。
继承性：否。
动画性：不可动画。
关键约束：视图时间线名称 必须以 -- 双破折号开头，形式与CSS自定义属性（变量）完全相同。这是为了与普通CSS关键字区分，避免命名冲突。
工作机制解析
视图进度时间线的运作涉及三个关键角色：
术语 | 含义 | 说明 |
|---|---|---|
主体（Subject） | 应用 view-timeline-name 的元素 | 动画的触发对象，其可见性决定时间线进度 |
源（Source） | 主体最近的滚动容器 | 通常是祖先元素，其滚动区域控制时间线 |
时间线（Timeline） | 命名的进度曲线 | 由主体在源中的可见程度驱动，0%~100% |
匿名时间线 vs 命名时间线
匿名时间线：不设置 view-timeline-name，动画直接通过 animation-timeline: view() 触发。
命名时间线：显式命名，可被任何 后代元素 引用，实现跨元素动画同步。
典型应用：父级命名，子级响应
/* 父级 - 定义视图时间线 */
.section {
view-timeline-name: --section-progress;
view-timeline-axis: block;
}/* 子级 - 引用父级时间线 */
.pull-quote {
animation: fade-in linear both;
animation-timeline: --section-progress;
}/* 动画设置 */
@keyframes fade-in {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}这种模式下，引用关系仅限于祖先→后代，平级元素无法直接引用。
1.2 view-timeline-axis
核心概念
view-timeline-axis 属性决定 哪个方向的滚动 驱动视图时间线的进度。它告诉浏览器：“当滚动容器在这个方向上移动时，根据元素的可见程度推进动画”。
语法与值
/* 逻辑值（受书写模式影响） */
view-timeline-axis: block; /* 默认值，垂直方向（英文） */
view-timeline-axis: inline; /* 水平方向（英文） *//* 物理值（不受书写模式影响） */
view-timeline-axis: x; /* 水平方向 */
view-timeline-axis: y; /* 垂直方向 */值 | 含义 | 适用场景 |
|---|---|---|
block | 块轴方向，英文下为垂直 | 标准纵向滚动页面 |
inline | 行内轴方向，英文下为水平 | 横向轮播、时间轴 |
x | 物理水平轴 | 明确指定横向滚动 |
y | 物理垂直轴 | 明确指定纵向滚动 |
逻辑值与物理值的选择：逻辑值（block/inline），会响应文档的书写模式（writing-mode），适合国际化项目；物理值（x/y）行为固定，适合已知布局的场景。
与其他属性的关系
.element {
/* 完整声明 */
view-timeline-name: --horizontal-scroll;
view-timeline-axis: x;
/* 等同于简写形式 */
view-timeline: --horizontal-scroll x;
}浏览器兼容性提示
截至2026年初，view-timeline-axis 在现代浏览器（Chrome、Edge、Safari）中支持良好，但Firefox仍保留对旧版关键字 horizontal / vertical 的支持。推荐采用特性检测编写兼容代码：
.animation {
view-timeline-name: --subjectReveal;
/* 现代浏览器 */
view-timeline-axis: x;
/* Firefox后备 */
view-timeline-axis: horizontal;
}1.3 view-timeline-inset
核心概念
view-timeline-inset 属性允许 调整滚动视口中用于驱动动画的有效区域。它可以“推迟”动画的起点、“提前”动画的终点，甚至让动画在元素进入视口前就开始（负值）。
语法与值
/* 单个值 - 同时设置起点和终点 */
view-timeline-inset: auto; /* 默认值，使用滚动填充 */
view-timeline-inset: 100px; /* 两端各内缩100px */
view-timeline-inset: 20%; /* 两端各内缩20% *//* 两个值 - 分别设置起点和终点 */
view-timeline-inset: 10% 70%; /* 起点内缩10%，终点内缩70% */
view-timeline-inset: auto 200px; /* 起点默认，终点内缩200px */
view-timeline-inset: 70% -100px; /* 起点内缩70%，终点外扩100px */值类型 | 含义 | 效果 |
|---|---|---|
auto | 使用 scroll-padding 值 | 通常为0，受滚动容器padding影响 |
正数 <length-percentage> | 内缩 | 画触发区间向视口内部收缩 |
负数 <length-percentage> | 外扩 | 动画触发区间向视口外部扩张 |
方向对应规则
单个值：同时应用于起点和终点。
两个值：第一个值 控制动画 起点（元素进入侧），第二个值 控制动画 终点（元素离开侧）。
轴与起止点的对应关系：
轴方向 | 起点侧（第一个值） | 终点侧（第二个值） |
|---|---|---|
y/block | 底部（进入视口） | 顶部（离开视口） |
x/inline | 右侧（进入视口） | 左侧（离开视口） |
典型应用场景
1. 让动画“延迟”开始，提前结束
.card {
view-timeline-name: --card-progress;
view-timeline-axis: y;
view-timeline-inset: 30% 20%;
/* 元素进入30%位置才开始动画，到达顶部20%位置时动画已结束 */
}2. 让动画在元素进入视口前就开始（负值外扩）
.hero-image {
view-timeline-name: --hero-zoom;
view-timeline-inset: -100px 0;
/* 元素距离视口底部还有100px时，动画已启动 */
}3. 与 animation-range 协同工作
view-timeline-inset 与 animation-range 功能相似，但作用层面不同：
view-timeline-inset：调整 时间线本身 的有效范围。
animation-range：调整 动画在时间线上的映射范围。
1.4 view-timeline
核心概念
view-timeline 是 view-timeline-name 和 view-timeline-axis 的简写属性，用于在一行声明中同时指定视图时间线的名称和滚动轴方向。
语法与值
/* 仅指定名称（轴使用默认值block） */
view-timeline: --custom-timeline;/* 同时指定名称和轴 */
view-timeline: --custom-timeline block;
view-timeline: --custom-timeline inline;
view-timeline: --custom-timeline x;
view-timeline: --custom-timeline y;/* 不命名，仅指定轴（创建匿名时间线） */
view-timeline: none block;顺序要求：同时提供两个值时，名称必须在前，轴必须在后。此顺序不可颠倒。
与拆分写法的等价关系
/* 简写形式 */
.element {
view-timeline: --gallery-scroll x;
}/* 等价于拆分形式 */
.element {
view-timeline-name: --gallery-scroll;
view-timeline-axis: x;
}适用场景
快速原型开发：一行代码完成时间线定义。
代码简洁优先：不需要单独复用名称或轴配置时。
与 animation-timeline 配合：命名后即可被引用。
1.5 视图进度时间线体系小结
属性 | 角色 | 关键特性 |
|---|---|---|
view-timeline-name | 命名 | 必须以 -- 开头，供后代引用 |
view-timeline-axis | 定向 | block/inline 逻辑值，x/y 物理值 |
view-timeline-inset | 调域 | 调整触发区间，支持负值外扩 |
view-timeline | 简写 | 名称+轴，顺序固定 |
四者协作流程：
用途 | 说明 |
|---|---|
命名 | view-timeline-name: --name |
定向 | view-timeline-axis: x|y|block|inline 或 view-timeline: --name axis |
调域 | view-timeline-inset: 调整触发位置（可选） |
引用 | animation-timeline: --name |
执行 | @keyframes 定义动画 |
二、视图过渡体系核心属性
视图过渡（View Transitions）是另一套独立的CSS规范，用于实现页面状态切换时的平滑过渡动画。除上篇博文详述的 view-transition-class 外，该体系最基础的属性是 view-transition-name。
2.1 view-transition-name
核心概念
view-transition-name 属性为元素 分配一个唯一的标识符，使其在视图过渡中作为一个独立图层参与动画，而不是与根元素（整个页面）的过渡混在一起。
语法与值
/* 默认值 - 不参与独立过渡 */
view-transition-name: none;/* 命名示例 - 普通标识符，无需--前缀 */
view-transition-name: header;
view-transition-name: product-card;
view-transition-name: sidebar;值 | 含义 | 说明 |
|---|---|---|
none | 不参与独立过渡 | 元素随根过渡统一变化 |
<custom-ident> | 参与独立过渡的唯一名称 | 必须全局唯一，不能重复 |
最严格的约束：在同一时刻，页面上不能有两个激活的元素拥有相同 view-transition-name。若发生重名，视图过渡API会拒绝执行（ViewTransition.ready将被reject）。
与 view-transition-class 的对比
维度 | view-transition-name | view-transition-class |
|---|---|---|
核心作用 | 建立唯一身份 | 建立共享分组 |
命名要求 | 必须唯一 | 可以重复、多个 |
标识符格式 | 普通标识符（如 header） | 普通标识符（选择器中使用点号） |
选择器方式 | ::view-transition-group(header) | ::view-transition-group(.card-group) |
特异性 | (0,0,1) | (0,0,1) |
能否共用样式 | 否，需逐个设置 | 是，通过类名统一设置 |
两者的协作关系：
/* 每个卡片必须有唯一的名称 */
.card-1 { view-transition-name: card-1; }
.card-2 { view-transition-name: card-2; }
.card-3 { view-transition-name: card-3; }/* 但它们可以通过共享类来应用相同的动画 */
.card-1, .card-2, .card-3 {
view-transition-class: card-group;
}/* 一次编写，全体生效 */
::view-transition-group(.card-group) {
animation-duration: 0.5s;
}三、跨体系协同：时间线与过渡的未来
虽然“视图进度时间线”（滚动驱动动画）与“视图过渡”（状态切换动画）目前属于 两个独立的CSS模块，分别解决不同场景的动画需求，但它们的组合使用正在成为未来Web动画的重要方向。
3.1 可能的协同场景
场景：滚动驱动进入，过渡驱动切换
/* 卡片进入视口时的滚动驱动动画 */
.card {
view-timeline: --card-reveal block;
animation-timeline: --card-reveal;
animation: fade-in linear;
}/* 卡片选中后的状态过渡动画 */
.card.active {
view-transition-name: active-card;
view-transition-class: card-transition;
}::view-transition-group(.card-transition) {
animation: scale-up 0.3s;
}3.2 命名规范的差异与注意
属性 | 命名规范 | 原因 |
|---|---|---|
视图时间线 | ||
view-timeline-name | 必须以 -- 开头 | 与CSS变量形式统一，避免关键字冲突 |
视图过渡 | ||
view-transition-name | 不能以 -- 开头 | 普通 <custom-ident>，强调唯一性 |
view-transition-class | 不能以 -- 开头 | 普通 <custom-ident>，可多个 |
重要提示：两个体系的命名规范截然不同，使用时务必区分，切勿混淆。
四、浏览器支持与渐进增强策略
4.1 当前支持状态（截至2026年初）
4.2 渐进增强实现方案
1. 特性检测（CSS）
@supports (animation-timeline: view()) {
/* 支持滚动驱动动画的浏览器 */
.card {
view-timeline: --card-progress block;
animation-timeline: --card-progress;
}
}@supports (view-transition-class: card) {
/* 支持视图过渡类的浏览器 */
.card {
view-transition-class: card-group;
}
}2. 特性检测（JavaScript）
// 检测视图时间线支持
const supportsScrollDriven = CSS.supports('animation-timeline', 'view()');
// 检测视图过渡支持
const supportsViewTransitions = typeof document.startViewTransition === 'function';
// 检测过渡类支持（间接）
const supportsTransitionClass = CSS.supports('view-transition-class', 'test');3. 降级方案示例
function startCardAnimation(card) {
if (typeof document.startViewTransition === 'function') {
// 支持视图过渡：使用平滑动画
document.startViewTransition(() => {
card.classList.add('selected');
});
} else {
// 降级方案：直接切换状态
card.classList.add('selected');
}
}五、完整属性速查表
属性 | 核心作用 | 关键约束 | 简写形式 |
|---|---|---|---|
视图时间线 | |||
view-timeline-name | 命名时间线 | 必须以 -- 开头 | view-timeline |
view-timeline-axis | 指定滚动轴 | block/linline/x/y | view-timeline |
view-timeline-inset | 调整触发区间 | 支持负值 | 无 |
view-timeline | 简写属性 | 名称在前，轴在后 | 无 |
视图过渡 | |||
view-transition-name | 建立唯一身份 | 全局唯一 | 无 |
view-transition-class | 建立共享分组 | 可重复、可多个 | 无 |
总结
CSS的 views-* 属性家族涵盖了两个强大的动画体系：
视图进度时间线（view-timeline-*）：将动画与滚动位置绑定，让元素在进入和离开视野时产生自然的渐进效果。其核心在于 命名、定向、调域 三步曲，通过 view-timeline-name 赋予时间线身份，view-timeline-axis 控制响应方向，view-timeline-inset 微调触发区间。
视图过渡（view-transition-*）：在页面状态切换时实现像素级精确的过渡动画。view-transition-name 为元素建立不可重复的唯一身份，而 view-transition-class 则突破此限制，实现了跨元素的样式共享。
这两个体系目前独立发展、解决不同问题，但共同代表了CSS动画从“时间驱动”迈向“ 视图驱动 ”、“ 交互驱动 ”的重要演进。随着浏览器支持的日趋完善，它们将为Web界面带来更加流畅、自然、低成本的动效解决方案。
最佳实践建议：
视图时间线适用于 滚动触发的渐进式动画。
视图过渡适用于 状态切换的突变式动画 。
始终提供特性检测和降级方案。
严格遵守各自的命名规范，切勿混淆。
掌握这些属性，您将能够以声明式、高性能的方式，构建出以往需要复杂JavaScript监听才能实现的交互体验。
