我可以用 Sass 以某种方式循环这个关键帧动画吗？

Question

我有一个客户希望从他们的旧网站迁移这个精确的关键帧动画，但我们希望它无限循环。我知道我可以从 JS 数组创建一个全新的幻灯片，但我想知道像 Sass 这样的预处理器是否能让我按原样循环播放这个东西。感谢任何意见。

    @keyframes slidySlidesFadeInOut {
       0% {
        opacity:1;
      }
      8% {
        opacity:1;
      }
      25% {
        opacity:0;
      }
      92% {
        opacity:0;
      }
      100% {
        opacity:1;
      }
    }
    
    #slidySlides {
      position:relative;
      height:301px;
      width:318px;
      margin:0 auto;
    }
    
    #slidySlides img {
      position:absolute;          
      animation-name: slidySlidesFadeInOut;
      animation-timing-function: ease-in-out;
      animation-iteration-count: 1;
      animation-duration: 180s;
    }
    
    #slidySlides img:nth-of-type(1) {
      
      animation-delay: 150s;
    }
    #slidySlides img:nth-of-type(2) {
      
      animation-delay: 120s;
    }
    #slidySlides img:nth-of-type(3) {
      
      animation-delay: 90s;
    }
    #slidySlides img:nth-of-type(4) {
      
      animation-delay: 50s;
    }
    #slidySlides img:nth-of-type(5) {
    animation-delay: 15s;
    }
    #slidySlides img:nth-of-type(6) {
      animation-delay: 0;
    }

Answer 1

如果您只想让动画循环播放，请将其添加到样式中：

animation-iteration-count:infinite;

或将动画名称替换为：

  animation: slidySlidesFadeInOut 180s infinite;

并且这不需要SASS，尽管它在SASS.

中是完全有效的

我可以用 Sass 以某种方式循环这个关键帧动画吗？

Can I loop this keyframes animation somehow with Sass?

loops

sass

css-animations