javascript - Create dynamic highlighting while reading text in website

Question

I want to mimic a effect of a "real time" highlighter. It consist as the user is reading a news on my website.

The news are usually really big, that's why I want to pin point the highlighted phrases (chosen by the news' creator), providing a change in background color, with a smooth transition, starting from the left to the right. As someone is highlighting it to you while you're reading the news.

Below you can found what I got. I don't know why it's not creating the transition. It just appears as static highlighting.

CSS:

.highlight .highlighted {
    background-position: -100%;
}
.highlight {
    background-image: linear-gradient(90deg,rgba(255,255,255,0) 50%, #F3D1CE 0);
    background-size: 200%;
    background-position: 0%;
    transition: background-position .8s;
}

HTML:

  <p>
    Vestibulum facilisis, purus nec pulvinar iaculis, ligula mi congue nunc, vitae euismod ligula urna in dolor. Aenean commodo ligula eget dolor. Nunc sed turpis. 
    <span class="highlight highlighted">
        Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
    </span> 
    Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
  </p>

JS:

const target = document.querySelector('.highlight');
    
function handleIntersection(entries) {
  entries.map((entry) => {
    if (entry.isIntersecting) {
      entry.target.classList.add('highlighted')
    } else {
      entry.target.classList.remove('highlighted')
    }
  });
}

const observer = new IntersectionObserver(handleIntersection);
observer.observe(target);

Answer 1

等待大神答复