CSS 滚动时元素的透明效果

Question

我很有趣，是否可以使用 滚动驱动动画 API 将文本创建为

<footer>

顺利出现？

我尝试了这段代码，但它对我不起作用。有人可以解释一下出了什么问题吗？ *JS 对解决方案不感兴趣

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%;
}

<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>

Answer 1

您的

animation-range

需要是

entry 0% entry 100%

并且不需要命名视图，您可以依赖

view()

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;
  animation-timeline: view();
  animation-range: entry 0% entry 100%;
}

<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>