Image fade in 7.1

Site URL: https://emu-blackbird-p2a2.squarespace.com

I forgot that the image fade-in option was for classic editor. I have a handful of images that I want to fade in. This site is a for a historical society and is very text heavy so I don't want the whole site to fade in. I am trying to get the images to fade in using: 

@keyframes fadeMe {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;}}

.fe-block.fe-block-yui_3_17_2_1_1732376100964_42031 {
  opacity: 0; 
  animation: fadeMe 1s 1.5s forwards; }

I am trying to fade in the newspaper clipping images. If someone could please help me with adjusting my code for the first one, I can get the block IDs/fe-blocks for the others. Screen shot to show the one I am attempting right now. 

It's the first photo collage (all just one actual image) on the History page.

https://emu-blackbird-p2a2.squarespace.com/history

code: 1234

The block ID is #block-yui_3_17_2_1_1732376100964_42031.

For anyone else looking to do similar, I used this: 

#block-yui_3_17_2_1_1732376100964_42031 {
  animation: fade-me-in 3.5s ease-in-out forwards;
}

@keyframes fade-me-in {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0.4;
  }
  80% {
    opacity: 0.7;
  }
  100% {
    opacity: 1;
  }
}
 

Ok actually, I am realizing the flaw with my code is that the fade in starts as the page loads so if I put 3 seconds, that has faded in long before you get to an image at the bottom of the page. Can anyone help me with this please? How do i switch it to not start fading in until you get to that section/ scroll down?

Hello @KMills, To ensure your fade-in animation starts only when the user scrolls to the section, you can use the Intersection Observer API. Here's the updated code:

1. Navigate to Pages > Website Tools > Custom CSS.
2. Paste the code into the CSS editor.
3. Hit Save and you’re done

/* Initial state of the element */
#block-yui_3_17_2_1_1732376100964_42031 {
  opacity: 0; /* Ensure element is hidden initially */
}

/* Fade-in animation */
@keyframes fade-me-in {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0.4;
  }
  80% {
    opacity: 0.7;
  }
  100% {
    opacity: 1;
  }
}

.fade-in {
  animation: fade-me-in 3.5s ease-in-out forwards; /* Triggered class */
}

1. Navigate to Pages > Website Tools > Code Injection.
2. Paste the code into the FOOTER editor.
3. Hit Save and you’re done

<script>
document.addEventListener("DOMContentLoaded", function() {
  const target = document.querySelector('#block-yui_3_17_2_1_1732376100964_42031');

  if (target) {
    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          target.classList.add('fade-in'); // Add fade-in animation class
          observer.unobserve(target); // Stop observing once animation starts
        }
      });
    }, {
      threshold: 0.1 // Trigger when 10% of the element is visible
    });

    observer.observe(target);
  }
});
</script>