使用Scroll-driven Animations API实现footer文本滚动淡入的代码问题排查

我想通过Scroll-driven Animations API让<footer>标签内的文本平滑淡入显示，编写了以下CSS和HTML代码但无法实现预期效果，求解释问题所在（不接受JavaScript解决方案）。

原代码示例 #

CSS #

body {
  margin: 0;
  font-size: 18px;
  padding: 0 20px;
}

.main {
  min-height: 100vh;
  margin-bottom: 10px;
}

@keyframes opacity-in {
  from {
    opacity: 0;
  }
}

footer {
  color: #f00;
}

footer p {
  animation-name: opacity-in;
  animation-fill-mode: both;
  animation-timing-function: linear;
  view-timeline-name: --opacity-show;
  animation-timeline: --opacity-show;
  animation-range: 0% 100%;
}

HTML #

<main class="main">
  <div>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic dolor voluptatum repellendus laboriosam reprehenderit deleniti, voluptas libero molestiae voluptatem provident perspiciatis consectetur ad placeat qui, nostrum officiis eos nisi autem.
  </div>
  <div>
    Laboriosam explicabo, dolorum necessitatibus libero totam veritatis quam facilis accusamus, blanditiis id deserunt laborum delectus, eligendi commodi dolorem modi nostrum ex architecto voluptatibus ducimus. Voluptatem atque maiores dolore architecto ratione.
  </div>
  <div>
    Sint at enim, dolorem magnam quia eaque sunt, nostrum commodi maiores explicabo obcaecati eum vitae consectetur labore ut non veritatis laborum earum modi autem reiciendis in ipsum? Incidunt, dignissimos, repellat!
  </div>
  <div>
    Iusto minus numquam incidunt, facilis tempora velit possimus! Error quisquam, fugit totam libero fugiat harum incidunt pariatur! Eligendi minima corrupti dicta debitis corporis dignissimos, ipsa distinctio officia voluptates saepe laudantium.
  </div>
  <div>
    Quisquam fugit repellendus placeat natus tempora, magnam molestias maiores provident voluptates quos praesentium facere non veniam nulla rem nam dolor est iste odio, aut numquam totam deleniti? Omnis, minima, nemo.
  </div>
  <div>
    Voluptates eligendi eos explicabo vel dicta consequatur, facere esse consectetur praesentium! Sunt consequuntur nisi aut quas magnam aspernatur, commodi voluptatem temporibus corporis, nobis rem nemo eos suscipit reprehenderit placeat repellat.
  </div>
  <div>
    Hic error beatae a repellat aut ducimus asperiores saepe ratione nobis possimus ad mollitia illum quasi explicabo dolor eveniet repellendus molestiae, totam laudantium nam commodi, sed nostrum nihil. Minima, nemo.
  </div>
  <div>
    Laborum veritatis distinctio iure illum consequuntur, perspiciatis, nisi facilis vel voluptas animi, magnam expedita corporis quis maxime unde. Tenetur, consectetur voluptates optio nam illo ex ab cupiditate voluptas inventore fugiat.
  </div>
  <div>
    Amet vitae soluta numquam necessitatibus, assumenda voluptates ut quas iste ex quidem! Accusantium tenetur dolorum, alias est. Nesciunt saepe quo soluta alias quidem molestias praesentium consectetur ea natus maxime. Impedit!
  </div>
  <div>
    Obcaecati, amet ipsa explicabo aspernatur fuga. Ipsum vitae nobis odio asperiores non sed, officiis repudiandae, eum adipisci explicabo minima repellendus cumque excepturi reprehenderit. Magni, ipsa est. Quasi tempora obcaecati assumenda!
  </div>
</main>
<footer>
  <p>FOOTER TEXT Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id deleniti, eos accusamus, cupiditate aut dolorum! Iusto explicabo, assumenda quasi, eligendi doloribus blanditiis corrupti illo recusandae id, expedita non maxime officia.</p>
  <p>FOOTER TEXT Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id deleniti, eos accusamus, cupiditate aut dolorum! Iusto explicabo, assumenda quasi, eligendi doloribus blanditiis corrupti illo recusandae id, expedita non maxime officia.</p>
  <p>FOOTER TEXT Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id deleniti, eos accusamus, cupiditate aut dolorum! Iusto explicabo, assumenda quasi, eligendi doloribus blanditiis corrupti illo recusandae id, expedita non maxime officia.</p>
</footer>

问题分析与修正 #

核心问题 #

1. 未正确绑定视图时间线：原代码仅给footer p设置了view-timeline-name，但没有指定这个时间线基于哪个元素的视图可见性变化触发。必须在footer元素上定义视图时间线，让动画关联到footer进入视口的过程。
2. 动画范围设置不符合需求：animation-range: 0% 100%是基于时间线的全周期，但我们需要的是footer文本进入视口的过程中淡入，应该使用entry关键字指定元素进入视口的阶段。
3. 初始状态未显式定义：虽然动画有from { opacity: 0 }，但显式设置footer p的初始opacity: 0能确保动画触发前的状态正确，避免闪烁。

修正后的CSS代码 #

body {
  margin: 0;
  font-size: 18px;
  padding: 0 20px;
}

.main {
  min-height: 100vh;
  margin-bottom: 10px;
}

@keyframes opacity-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

footer {
  color: #f00;
  /* 定义视图时间线：名称为--opacity-show，基于垂直轴的视图变化 */
  view-timeline: --opacity-show block;
}

footer p {
  opacity: 0; /* 显式初始透明 */
  animation-name: opacity-in;
  animation-fill-mode: both;
  animation-timing-function: ease-in-out;
  animation-timeline: --opacity-show; /* 关联footer定义的时间线 */
  /* 设置动画范围：当元素顶部进入视口（entry 0%）到底部完全进入视口（entry 100%）时执行动画 */
  animation-range: entry 0% entry 100%;
}

关键说明 #

• view-timeline: --opacity-show block：在footer上创建一个名为--opacity-show的视图时间线，block表示基于垂直方向的滚动视图变化。
• animation-range: entry 0% entry 100%：指定动画在footer元素进入视口的整个过程中执行，从元素顶部刚进入视口开始，到元素底部完全进入视口结束。
• 显式设置opacity: 0：配合animation-fill-mode: both，确保元素初始状态透明，动画结束后保持不透明。

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