只写一个时间轴名称为何动画范围被自动填满？
当在 animation-range 属性中只指定一个时间轴名称且不带长度百分比时，浏览器会自动将其同时应用于起始和结束位置。
单一时间轴名称的默认规则
当在 animation-range 属性中只写一个时间轴名称且后面没有跟长度百分比时，浏览器会自动将该名称同时应用于起始和结束位置。例如，设置 animation-range: contain; 实际上等同于将起始位置设为 contain 0%，结束位置设为 contain 100%。这意味着动画会从时间轴的 0% 处开始，一直持续到 100% 处结束，覆盖整个时间轴范围。这种自动填充机制确保了即使只指定了名称，动画也能在完整的时间轴上运行，不会出现起始或结束位置未定义的情况。
这种默认行为对于需要全范围动画的场景非常方便，开发者无需显式写出起始和结束位置。然而，如果开发者希望动画只在特定的时间段内运行，或者希望动画在某个时间点提前结束，就需要显式指定起始和结束位置，或者使用两个值来分别定义它们。例如，使用 animation-range: contain 20%; 会将起始位置设为 contain 20%，结束位置保持默认的 contain 100%，从而缩短动画的运行范围。
检查与验证步骤
要验证单一时间轴名称是否被自动填满，可以在浏览器开发者工具的 Elements 面板中选中对应的元素，查看其计算后的样式。在 Styles 面板中找到 animation-range 属性，查看其展开后的 animation-range-start 和 animation-range-end 值。如果只写了一个时间轴名称，且没有跟长度百分比，那么这两个值应该都包含该时间轴名称，并且起始值的长度百分比部分为 0%，结束值的长度百分比部分为 100%。例如，如果原代码是 animation-range: cover;，那么计算后的样式应该是 animation-range-start: cover 0%; animation-range-end: cover 100%;。
如果计算后的样式显示起始或结束位置没有包含时间轴名称，或者长度百分比部分不是 0% 或 100%，那么说明代码可能存在语法错误，或者浏览器没有正确应用默认规则。此时可以尝试显式地写出起始和结束位置，例如 animation-range: cover 0% cover 100%;，以确认浏览器是否支持该属性。此外，还可以通过观察动画的实际运行效果来验证，如果动画从时间轴的开始一直运行到结束，那么说明单一时间轴名称的默认规则生效了。
常见错误与修正方法
常见的错误是在单一时间轴名称后错误地添加了长度百分比，导致默认规则失效。例如，写 animation-range: cover 20%; 会被解析为起始位置是 cover 20%，结束位置是 cover 100%，而不是起始位置是 cover 0%，结束位置是 cover 20%。这种错误会导致动画的起始位置提前，而不是从时间轴的开始处运行。修正方法是确保在单一时间轴名称后不要添加长度百分比，或者明确地写出起始和结束位置。
另一个常见的错误是混淆了时间轴名称和长度百分比的位置。例如，写 animation-range: 20% cover; 会被解析为起始位置是 20%，结束位置是 cover 100%，而不是起始位置是 cover 0%，结束位置是 cover 20%。这种错误会导致动画的结束位置被自动填满，而不是按照预期的时间段运行。修正方法是确保时间轴名称和百分比的顺序正确，或者使用两个值来分别定义起始和结束位置。
实际应用场景
在实际应用中，单一时间轴名称的默认规则常用于需要全范围动画的场景，例如页面加载时的淡入效果，或者元素进入视口时的缩放效果。开发者可以简单地设置 animation-range: view();，而不需要关心起始和结束位置，浏览器会自动将其填满。然而，对于需要更精细控制的场景，例如动画只在元素进入视口的前 50% 时运行，或者动画在元素离开视口后继续运行，就需要显式地指定起始和结束位置。
例如，如果希望动画只在元素进入视口的前 50% 时运行，可以设置 animation-range: entry 0% entry 50%;。如果希望动画在元素离开视口后继续运行，可以设置 animation-range: entry 0% exit 100%;。通过显式地指定起始和结束位置，可以精确控制动画的运行范围，从而实现更丰富的视觉效果。
资料与延伸阅读
你可以通过以下原始资料核对文中概念，并继续深入阅读。