Automatic Scroll

Question

When creating a horizontal scroll with scroll-snap-type and scroll-snap-align you can scroll the carousel by setting a keyframes animation with transform: translateX(), margin-left or left. When you remove one or both of these properties this behaviour is lost. What is happening here and why is it behaving differently on　Firefox?

#slide_1 {
    background-color: darkblue;
}
#slide_2 {
    background-color: orange;
}

/* Animations */
@keyframes tonext {
    0% {
        margin-left: 0;
    }
    100% {
        margin-left: calc(100% + 150px);
    }
}

ol, li {
    list-style: none;
    margin: 0;
    padding: 0;
}
#pSlider {
    width: 300px;
    height: 300px;
    position: relative;
    margin: 0 auto;
}
#pSlider #slider-container {
    display: flex;
    height: 100%;
    width: 100%;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
}
#pSlider #slider-container .li_slide {
    position: relative;
    width: 100%;
    flex: none;
    margin-right: 150px;
}
#pSlider #slider-container .li_slide:last-child {
    margin-right: 0;
}
#pSlider #slider-container .li_slide .slide-snapper {
    /* Auto play */
    scroll-snap-align: start;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    animation: tonext 4s infinite ease alternate;
}

<div id="pSlider">
  <ol id="slider-container" dir="ltr">
    <li id="slide_1" class="li_slide">
      <div class="slide-snapper"></div>
    </li>
    <li id="slide_2" class="li_slide">
      <div class="slide-snapper"></div>
    </li>
  </ol>
</div>

https://codepen.io/pscldhw/pen/eYejYxW