I'm working on a CSS only carousel. It uses a keyframes animation to scroll automatically. Because there are also arrow buttons to navigate manually I want to stop the animation on hover. Everything works fine up to this point. But after you release the hover it breaks in various ways and essentially stops sliding following the correct order and timing.

@charset "UTF-8";
*, *:after, *:before {
  box-sizing: border-box; }

@keyframes tonext {
  75% {
    left: 0; }
  95% {
    left: calc(100%   150px); }
  98% {
    left: calc(100%   150px); }
  99% {
    left: 0; } }
@keyframes snap {
  96% {
    scroll-snap-align: start; }
  97% {
    scroll-snap-align: none; }
  99% {
    scroll-snap-align: none; }
  100% {
    scroll-snap-align: start; } }
@keyframes tostart {
  75% {
    left: 0; }
  95% {
    left: calc(-300% - 450px); }
  98% {
    left: calc(-300% - 450px); }
  99% {
    left: 0; } }
/* Slider container size */
/* Slider container properties */
/* Slide size */
/* Slide properties */
/* Scrollbar properties */
ol, li {
  list-style: none;
  margin: 0;
  padding: 0; }

#pSlider {
  width: 500px;
  height: 100px;
  position: relative;
  margin: 50px;
  /* Left, Right Navigation Arrows */
  /* Scrollbar */ }
  #pSlider #slider-container {
    display: flex;
    height: 100%;
    width: 100%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth; }
    #pSlider #slider-container .li_slide {
      position: relative;
      width: 500px;
      border-radius: 10px;
      background-color: khaki;
      flex: none;
      margin-right: 150px; }
      #pSlider #slider-container .li_slide:last-child {
        margin-right: 0; }
      #pSlider #slider-container .li_slide:nth-child(even) {
        background-color: aqua; }
      #pSlider #slider-container .li_slide .slide-snapper {
        scroll-snap-align: start;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        animation: tonext 4s ease infinite, snap 4s ease infinite; }
        #pSlider #slider-container .li_slide .slide-snapper:hover {
          animation-name: none; }
      #pSlider #slider-container .li_slide:last-child .slide-snapper {
        animation-name: tostart, snap; }
  #pSlider:before, #pSlider:after, #pSlider .prev_slide, #pSlider .next_slide {
    display: inline-block;
    position: absolute;
    width: 50px;
    height: 50px;
    border-radius: 100%;
    top: 50%;
    z-index: 2;
    cursor: pointer; }
  #pSlider:before, #pSlider:after {
    background-color: #333;
    color: #DDD;
    text-align: center; }
  #pSlider:before, #pSlider .prev_slide {
    content: "←";
    left: -10px; }
  #pSlider:after, #pSlider .next_slide {
    content: "→";
    right: -10px; }
  #pSlider:after {
    z-index: 1;
    /* set underneath .next_slide (z: 2)*/ }
  #pSlider #slider-container::-webkit-scrollbar {
    display: none;
    height: 5px; }
  #pSlider #slider-container::-webkit-scrollbar-thumb {
    background-color: #000;
    border-radius: 50px; }
  #pSlider #slider-container::-webkit-scrollbar-track {
    background-color: transparent; }

  <div id="pSlider">
        <ol id="slider-container" dir="ltr">
            <li >
                <p>1</p>
                <div id="slide_1" ></div>
                <a  href="#slide_4"></a> <a  href="#slide_2"></a> </li>
            <li >
                <p>2</p>
                <div id="slide_2" ></div>
                <a  href="#slide_1"></a> <a  href="#slide_3"></a> </li>
            <li >
                <p>3</p>
                <div id="slide_3" ></div>
                <a  href="#slide_2"></a> <a  href="#slide_4"></a> </li>
            <li >
                <p>4</p>
                <div id="slide_4" ></div>
                <a  href="#slide_3"></a> <a  href="#slide_1"></a> </li>
        </ol>
    </div>

CodePudding user response：

This part in the SCSS

#pSlider {
  #slider-container {
    .li_slide {
      .slide-snapper {
        &:hover {
          animation-name: none;
        }
      }
    }
  }
}

stops the animation only for the hovered slide, while the other slides keep being animated out of the viewport, which ends up in a mismatch. Looks like it can be solved by applying it a bit different:

#pSlider {
  #slider-container {
    &:hover .li_slide .slide-snapper {
      animation-name: none;
    }
  }
}

(I skipped the other parts in the SCSS but make sure the declaration of stopping the animation comes below the declration of the original animation)

By means of plain/compiled CSS, the change should be from

#pSlider #slider-container .li_slide .slide-snapper:hover {
  animation-name: none;
}

to

#pSlider #slider-container:hover .li_slide .slide-snapper {
  animation-name: none;
}