移动端滚动驱动动画提前结束？检查 animation-range-end 属性
当滚动驱动动画未按预期在元素离开视口时结束，应检查 animation-range-end 属性的设置值。
检查动画结束点是否被意外缩短
在移动端使用滚动驱动动画时，如果发现元素在尚未完全离开视口时动画就结束了，通常是因为动画的结束范围被设置得比预期更早。animation-range-end 属性用于定义动画在时间轴上的结束位置，默认值为 normal，表示动画在时间轴结束时结束。如果开发者手动设置了该属性，可能会导致动画在元素到达视口边缘之前就达到了 100% 的进度。例如，将 animation-range-end 设置为 exit 25%，意味着动画会在元素离开视口 25% 的位置结束，从而缩短了动画的有效持续时间。
要验证这一点，可以在 CSS 中检查动画规则中是否显式声明了 animation-range-end。如果使用了简写属性 animation，它可能会重置该属性的值。根据规范，animation-range-end 是一个重置值，不能通过简写属性设置。因此，正确的做法是在声明简写属性之后，单独声明 animation-range-end，以确保其值不会被覆盖。通过这种方式，可以确保动画按照预期的范围播放，而不是在元素离开视口之前就结束。
确认命名范围与数值的组合使用
animation-range-end 属性支持多种值类型，包括 normal、长度百分比以及命名范围。命名范围如 cover 和 contain 是相对于视口或容器定义的特定区域。如果只指定了命名范围而没有指定数值，默认的结束位置是 100%。例如，animation-range-end: cover 表示动画在 cover 范围结束时结束。然而，如果需要更精确的控制，可以结合命名范围和数值，如 animation-range-end: cover 80%，这表示动画在 cover 范围的 80% 处结束。
在移动端调试时，应特别注意命名范围与数值的组合是否正确。如果数值设置过大，可能会导致动画在元素完全进入视口之前就结束。此外，当使用多个动画属性时，每个值对应一个动画名称。因此，确保每个动画的 animation-range-end 值与动画名称的顺序一致，以避免混淆。通过这种方式，可以精确控制动画在滚动过程中的播放范围。
排查简写属性对长属性值的重置影响
在编写 CSS 时，使用简写属性 animation 可能会重置之前声明的 animation-range-end 值。这是因为 animation-range-end 被定义为重置值，意味着任何使用简写属性的地方都会将其值重置为 normal。因此，如果在代码中先声明了 animation-range-end，随后又使用了 animation 简写属性，可能会导致动画范围被意外覆盖。为了防止这种情况，应确保在声明简写属性之后，单独声明 animation-range-end。
为了验证这一点，可以在浏览器开发者工具中检查元素的 computed style。如果发现 animation-range-end 的值被重置为 normal，说明简写属性覆盖了之前的设置。此时，应调整代码结构，将 animation-range-end 的声明放在简写属性之后，或者使用 animation-range 简写属性来同时设置开始和结束范围。通过这种方式，可以确保动画范围按照预期设置，而不会被简写属性重置。
验证动画填充模式对结束状态的影响
当动画范围被缩短时，动画结束后元素的状态可能会受到影响。animation-fill-mode 属性可以控制动画在播放前后的状态。例如，设置 animation-fill-mode: forwards 可以使元素在动画结束后保持最后一帧的状态。然而，如果动画范围被缩短，元素的最终状态可能会与预期不符。因此，在调试时，应同时检查 animation-range-end 和 animation-fill-mode 的设置。
为了验证这一点，可以在代码中添加一个复选框来切换 animation-fill-mode 的值。通过这种方式，可以观察动画在缩短范围和填充模式不同设置下的表现。如果发现动画在元素离开视口之前就结束了，并且元素没有保持最后一帧的状态，说明 animation-range-end 的设置可能过于激进。此时，应调整 animation-range-end 的值，使其与动画的预期结束点一致。
资料与延伸阅读
你可以通过以下原始资料核对文中概念，并继续深入阅读。