Sitewide animation - images to animate one after the other

Hello! 

I have a client's website (www.jameshenshaw.co.uk) - and the four logos that load on the third block down on the homepage - he is asking if I can make them slowly load one by one on the scroll. I have added sitewide animation and disabled animation of the blocks above to try to create this effect - however they load altogether and too fast. 

Can anyone help me to make these images rise up one by one on the scroll, and slower?

Thank you! 

Poppy

You mean

First logo load slowly

After X seconds, second logo load slowly

After X + Y seconds, third logo...

Similar with final logo?

yes - thank you!

my client is just on the personal plan, so it will need to be done with CSS if possible! thanks so much

Add this code to Website > Website Tools (under Not Linked) > Custom CSS

@media screen and (min-width: 768px) {
.fe-65563c9a9c92a6339e4fd014 .fe-block:not(.fe-block-de011ed580ad1a8d2a6f) .sqs-block-image  img {
    opacity: 0;
    animation: fadeIn 1s forwards;
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
div#block-7a05e8e0494f272025f4 img {
  animation-delay: 0s;
}

div#block-e102033346a698f626d2 img  {
  animation-delay: 2s;
}

div#block-becb520cf9deaebfa9ec img {
  animation-delay: 4s;
}

div#block-b25e3cbc6b414dd18900 img {
  animation-delay: 6s;
}
}

Hello - I tried this and replaced the block IDs with the ones on my site but the code didn't work?

Don't edit anything in the code

Hello - I tried adding the code and it had no effect, so I tried changing the block IDs and it still didn't work?

Thank you for your help! 

The code already worked, It's just that it works on page load, not on page scroll, you can scroll to that section then reload the page, you will see.

Hello - on page load the images load with the normal site animation altogether?

Is it an issue that the block IDs do not reflect the block IDs for the images that I can see using Squarespace ID finder?

Thank you!