CSS滚动驱动动画：View Progress Timeline下图片动画不生效原因咨询

我尝试用CSS Scroll-driven Animations的View Progress Timeline实现图片视差动画，代码如下：

img {
  object-fit: cover;
  width: 100%;
  height: 100%;
 
  animation: adjust-image linear both;
  animation-timeline: view(block);
  transform: scale(1.5);
}

@keyframes adjust-image {
  from {
    object-position: 50% 100%;
  }
  to {
    object-position: 50% 0;
  }
}

但这段代码没有产生预期的动画效果，换成animation-timeline: scroll(root block);后动画正常运行。以下是原因分析：

核心差异：两种时间线的触发逻辑 #

• View Progress Timeline（view(block)）：动画进度完全依赖目标元素在视口中的可见范围变化。只有当元素从视口外进入、或者从视口内离开时，时间线的进度才会从0过渡到1（或反向）。如果元素始终完全处于视口中，进度会固定为1（完全可见），动画不会执行中间过渡状态。
• Scroll Progress Timeline（scroll(root block)）：动画进度基于根滚动容器（浏览器窗口）的滚动距离占总可滚动长度的比例。只要页面存在可滚动空间，滚动时进度就会持续变化，动画会同步执行。

你的场景为什么View Timeline失效？ #

你的图片设置了width:100%; height:100%;，如果它的父容器高度和视口高度一致，图片会始终完全处于视口中——没有进入/离开视口的过程，view(block)的进度无法产生变化，自然不会触发object-position的过渡动画。

而换成scroll(root block)后，页面滚动时整体滚动进度在变化，动画就能正常驱动object-position从50% 100%过渡到50% 0。

验证View Timeline生效的方法 #

如果想让view(block)生效，可以给图片的父容器设置远大于视口的高度，让图片有进入/离开视口的过程：

.img-container {
  height: 200vh; /* 容器高度为视口的2倍 */
}

此时滚动页面，图片会逐渐进入/离开视口，view(block)的进度会随之变化，动画就能正常运行。

总结 #

• View Progress Timeline适合元素存在视口可见性变化的场景（如滚动时元素从底部滑入视口）。
• 你的视差轮播需求依赖页面整体滚动进度，因此Scroll Progress Timeline更匹配场景。

内容的提问来源于stack exchange，提问作者Jesper Ingels