Help with scroll animation

Hey guys, I could use some help with a scroll animation. 

my site: https://studiobeni.squarespace.com/
pw: maria

I'm trying to slightly spin the ball graphic on my site, below is the code I used, I see that the animation is applying but not on scroll. 

/**Initial State**/
.sqs-block-image:has([src*='ball']) {
transition:3s;

}

/**Animate State**/

.animate.sqs-block-image:has([src*='ball']) {
  animation: spin 3s;
}


// keyframes

@keyframes spin {
  0% {
    transform: rotate(-0deg);
   
  }
  
  50% {
    transform: rotate(90deg);
   
  }
  
   100% {
    transform: rotate(180deg);
   
  }
}

https://regrocery.co/ is the inspiration (scroll down to the section with the egg graphic to see the slight spin). 

I appreciate some pointers as I'm new to scroll animations.

CSS will work on Page Load

But to make it work on Page Scroll, you will need JavaScript code. 

You want it to continuously spin, or just spin on scrolling then stop?

@MariaFY I just took a peek at your website, and it looks AMAZING!

Would you be able to help me make similar animations? Or share the source that you found the ability to do it, I would be so blessed.

Thank you!