CSS Transparency effect of an element when scrolling

I'm interesting is it possible using by Scroll-driven Animations API create that text into <footer> smoothly appeared ?

I tried this code but it doesn't work for me. Can someone explain what is wrong? *JS is not interested in solutions

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>

Solution

Your animation-range need to be entry 0% entry 100% and no need a named view, you can rely on view()

body {
  font-size: 18px;
  padding: 0 20px;
  min-height: 100vh;
  margin-bottom: 10px;
}

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

footer p {
  color: #f00;
  animation: opacity-in linear both;
  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>

You can adjust the animation-range-start to control the initial state but the animation-range-end needs to remain entry 100%

body {
  font-size: 18px;
  padding: 0 20px;
  min-height: 100vh;
  margin-bottom: 10px;
}

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

footer p {
  color: #f00;
  animation: opacity-in linear both;
  animation-timeline: view();
  animation-range: entry 20% 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>