CSS Animation Not Playing on Scroll When Using Intersection Observer
I'm trying to create a fade-in animation for elements as they come into view using the Intersection Observer API, but the animation isn't triggering as expected. I have the following setup: ```css .fade-in { opacity: 0; transition: opacity 0.5s ease-in; } .fade-in-visible { opacity: 1; } ``` In my JavaScript, I have the observer configured like this: ```javascript const fadeInElements = document.querySelectorAll('.fade-in'); const options = { root: null, rootMargin: '0px', threshold: 0.1 }; const observer = new IntersectionObserver((entries, observer) => { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.classList.add('fade-in-visible'); observer.unobserve(entry.target); } }); }, options); fadeInElements.forEach(el => observer.observe(el)); ``` I expect the elements with the class `.fade-in` to fade in once they are 10% in view, but they just remain invisible. I’ve checked the console for errors, and there’s nothing there. The elements are being observed, as indicated by debugging logs I added. I'm using Chrome 93 and have tested on Firefox as well. I’ve ensured that the CSS is correctly linked and there are no conflicting styles. The elements are positioned normally in the document flow. Is there something I'm missing in the Intersection Observer setup, or could it be an scenario with the CSS transition? Any insights would be greatly appreciated!