css - 滚动捕捉动画不适用于 safari 和 mozilla

Question

我正在尝试Carousel仅使用 CSS（scroll-snap-align 方法）来实现。
这是我的代码：https ://codepen.io/kushul/pen/NWRjZLq?editors=1100

部分代码：

@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;
  }
}

这已经从这个例子中实现：https ://css-tricks.com/css-only-carousel/

它在 Chrome 上运行良好，但在 Safari 和 Mozilla 上运行不正常。你能帮我解决这个问题吗？谢谢。