<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Magnam voluptas aliquid, distinctio voluptatum neque qui modi. In adipisci ratione id officiis nulla veritatis, porro explicabo illum laudantium iure eius velit!</p>
<p>Autem, fuga debitis, hic blanditiis ab sed, <mark class="scroll-highlight">aspernatur voluptas numquam</mark> qui minus excepturi cupiditate tempore ullam unde adipisci saepe ipsa quae perspiciatis magni deserunt. Harum corrupti incidunt vel nihil delectus?</p>
<p>Rerum, ipsam magnam. Tempore cupiditate dolore magnam debitis illum, recusandae rerum cum atque porro iusto hic vero ut consequatur perspiciatis, eligendi ipsam temporibus totam molestiae, nemo a! Corrupti, iure nihil?</p>
<p>Ex temporibus porro totam, cum repellat itaque eos repudiandae reprehenderit corporis recusandae debitis distinctio inventore dicta! A maiores quibusdam vitae cum praesentium? Molestias eos, iste incidunt perferendis ea optio dolor?</p>
<p>Commodi repellat in adipisci. Praesentium deleniti repellendus optio quam, <mark class="scroll-highlight">numquam dignissimos iusto enim</mark> facere quidem illo adipisci saepe facilis. Nam quam atque iusto laboriosam expedita dolorum fugit eligendi magni quae.</p>
<p>Vel iure, reprehenderit cumque sint assumenda quaerat. Amet velit nemo maiores commodi expedita est architecto veniam aliquid, dolore assumenda ab earum quaerat nisi, repellat sint laborum, et eligendi nihil tenetur!</p>
<p>Aliquam exercitationem ut, aut unde, quasi cumque rem hic animi, iure ratione molestiae eligendi similique rerum maiores voluptatem eaque nisi deserunt repudiandae ea natus reiciendis. Corrupti laborum explicabo fugiat placeat?</p>
<p>Libero necessitatibus doloribus facere eveniet fuga illo inventore fugiat quae. Nobis minus, quia rerum dolorem molestiae ipsum sint ex voluptates sit explicabo animi libero, consequatur nostrum odit! Sit, eum dolore.</p>
<p>Nihil ex quo quod dolores temporibus modi quas, labore voluptates cupiditate. <mark class="scroll-highlight">Asperiores ullam facere repudiandae</mark> pariatur sed. Explicabo iste esse optio eos consequatur soluta incidunt, laudantium dignissimos vitae dolore quam?</p>
<p>Quo voluptate, quod odio saepe deserunt minus sed! Corporis, vel qui laudantium eos accusantium dignissimos veritatis sint voluptatibus voluptatem earum provident non, officia suscipit ipsam tempore sunt quisquam. Beatae, in.</p>
<p>Ea quisquam, quibusdam debitis aspernatur magni unde repudiandae odio natus similique, rerum sed, soluta voluptatum consectetur? Alias nam nisi ex ducimus cum natus sequi. Voluptatem nesciunt dolorum odio similique eveniet!</p>
<p>Veniam inventore aut ab quidem magni, beatae, ut quaerat repellat cum, vel ipsum adipisci perspiciatis maxime hic. Vel molestias aliquam alias, aut, suscipit voluptates nesciunt ullam quidem, qui consequatur quo?</p>
<p>Voluptate perferendis ratione, eaque obcaecati modi dolorum voluptatibus magni maiores, placeat eum fuga corporis laudantium, laborum esse. Doloremque iste, voluptate ea, est recusandae officiis maiores sint deleniti harum veniam nobis?</p>
<p><mark class="scroll-highlight">Ab expedita voluptas provident quam?</mark> Ea dolore sequi ipsa non molestiae odit odio! Pariatur fugiat ut officiis. Commodi dolor earum eum ipsum ab at, aspernatur maiores, facilis itaque modi saepe.</p>
<p>Vitae magni ab laboriosam reiciendis eaque qui consectetur iusto quod architecto, ex dignissimos itaque adipisci quae laudantium facere velit cumque corporis illum optio at harum? Totam sunt omnis voluptates sapiente!</p>
<p>Sunt a laboriosam doloremque libero. Id quasi repellendus minus qui soluta nulla ipsa. Vel reprehenderit et id cum consequatur accusamus harum. Doloribus velit optio neque tenetur sed mollitia quia amet?</p>
<p>Ducimus nulla eveniet, quam fugiat doloremque perferendis nisi! Nulla vel dolores exercitationem qui? Fugiat delectus assumenda quaerat nihil culpa similique neque, cumque voluptates a voluptatum ullam perspiciatis aperiam vero reprehenderit.</p>
<p>Deserunt exercitationem optio iure? Exercitationem voluptatem provident placeat, dicta praesentium aliquam fugiat omnis dignissimos! Minima expedita recusandae culpa officiis fugiat tenetur molestias, <mark class="scroll-highlight">earum distinctio porro accusamus. Maxime quibusdam perspiciatis omnis?</mark></p>
<p>Delectus, aperiam mollitia incidunt iste vel molestias, accusamus dolorum totam et ea beatae ratione in modi impedit earum! Dignissimos, ipsa magni. Maiores sint minima eius dignissimos tempora iste, dolor ipsum?</p>
<p>Quae sapiente ducimus voluptate repellendus maxime ipsa, ea incidunt suscipit doloremque in excepturi autem fugiat veniam! <mark class="scroll-highlight">Veritatis</mark> at a, harum unde, deserunt, nemo eos reiciendis adipisci consequatur explicabo minima eum!</p>

mark.scroll-highlight {
  background-size: 0 100%;
  background-repeat: no-repeat;
  background-color: transparent;
  background-image: linear-gradient(purple, purple);
  color: white;

  animation: mark-it linear;
  animation-fill-mode: forwards;
  animation-timeline: view();
  animation-iteration-count: 1;
  animation-range: contain 0% contain 25%;
}

@keyframes mark-it {
  0% {
    background-size: 0 100%;
  }
  100% {
    background-size: 100% 100%;
  }
}