动画:无悬停动画

Question

我在做一个只有CSS的旋转木马。它使用关键帧动画自动滚动。因为还有箭头按钮要手动导航，所以我想在悬停时停止动画。到目前为止，一切都很顺利。但是在你释放悬停之后，它以不同的方式中断，并且基本上停止了按照正确的顺序和时间滑动。

​

@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 class="li_slide">
                <p>1</p>
                <div id="slide_1" class="slide-snapper"></div>
                <a class="prev_slide" href="#slide_4"></a> <a class="next_slide" href="#slide_2"></a> </li>
            <li class="li_slide">
                <p>2</p>
                <div id="slide_2" class="slide-snapper"></div>
                <a class="prev_slide" href="#slide_1"></a> <a class="next_slide" href="#slide_3"></a> </li>
            <li class="li_slide">
                <p>3</p>
                <div id="slide_3" class="slide-snapper"></div>
                <a class="prev_slide" href="#slide_2"></a> <a class="next_slide" href="#slide_4"></a> </li>
            <li class="li_slide">
                <p>4</p>
                <div id="slide_4" class="slide-snapper"></div>
                <a class="prev_slide" href="#slide_3"></a> <a class="next_slide" href="#slide_1"></a> </li>
        </ol>
    </div>

​

Answer 1

在SCSS中的这一部分

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

只为悬停的幻灯片停止动画，而其他幻灯片则一直处于视图之外的动画状态，其结果是不匹配。看起来它可以通过稍微不同的应用来解决：

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

(我跳过了SCSS的其他部分，但确保停止动画的声明低于原始动画的解密)

通过普通/编译的CSS，更改应来自

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

至

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