Scroll Snap animation not working on safari & mozilla

I am trying to implement a Carousel with only CSS (scroll-snap-align methods).
This is my code : https://codepen.io/kushul/pen/NWRjZLq?editors=1100

Parts of the code:

@keyframes snap {
  96% {
    scroll-snap-align: center;
  }
  97% {
    scroll-snap-align: none;
  }
  99% {
    scroll-snap-align: none;
  }
  100% {
    scroll-snap-align: center;
  }
}

@media (hover: hover) {
  carousel__snapper {
    animation-name: tonext, snap;
    animation-timing-function: ease;
    animation-duration: 4s;
    animation-iteration-count: infinite; 
  }
              
  .carousel__slide:last-child .carousel__snapper {
    animation-name: tostart, snap;
  }
}

This has been implemented from this example : https://css-tricks.com/css-only-carousel/

It's working fine on Chrome but not working on Safari & Mozilla. Can you please help me to fix this issue? Thanks.