为何我的CSS animation-timeline: view() 动画无法正常工作？

架构老林

2026-6-28

问题排查与解决方案

核心问题分析

你的代码无法运行主要有以下几个关键问题：

图片地址无效：你用的是Unsplash网页链接，而非直接的图片资源URL，导致图片加载失败，动画没有可作用的目标元素。
触发空间不足：.parallax容器仅设置20vh高度，animation-range: entry cover需要元素在视口滚动过程中有足够的可见范围变化，过小的容器高度会让动画失去触发条件。
兼容性验证：animation-timeline: view()是CSS滚动驱动动画的新特性，需确保浏览器版本达标（Chrome/Edge 115+、Safari 16.4+）。

修正后的代码

<!-- 增加滚动占位元素，让页面具备可滚动空间 -->
<div class="scroll-spacer"></div>
<div class="parallax">
  <!-- 替换为Unsplash直接图片资源URL -->
  <img src="https://images.unsplash.com/photo-1516026672322-bc52d61a55d5?ixlib=rb-4.0.3&auto=format&fit=crop&w=1350&q=80" alt="Grayscale water drop" />
</div>
<div class="scroll-spacer"></div>

.scroll-spacer {
  height: 100vh;
}

.parallax {
  overflow: clip;
  height: 60vh; /* 提升容器高度，扩大动画触发范围 */
  position: relative;
  z-index: 1;
}

.parallax > img {
  height: 120%; /* 放大图片高度，让位移效果更直观 */
  width: 100%;
  object-fit: cover;
  animation: parallaxY linear;
  animation-timeline: view();
  /* 调整动画触发区间，适配容器滚动过程 */
  animation-range: entry 20% cover 80%;
}

@keyframes parallaxY {
  from {
    translate: 0 -50px;
  }
  to {
    translate: 0 50px;
  }
}