Loops 我可以用Sass循环这个关键帧动画吗？

我有一个客户，他希望这个精确的关键帧动画从他们的旧网站迁移，除了我们希望它无限循环。我知道我可以从一个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;
    }

---

如果只希望动画循环，请将此添加到样式：

动画迭代次数：无限；

或将动画名称替换为：

动画：180秒无限长的幻灯片；

---

这不需要SASS，尽管它在SASS中完全有效。

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

动画迭代次数：无限；

或将动画名称替换为：

动画：180秒无限长的幻灯片；

---

这不需要SASS，尽管它在SASS中完全有效。

谢谢您的回复！在第二次迭代中，它开始随机淡出，就像某些东西不同步一样。我正在尝试各种方法，但还没有找到解决办法。CSS是巫毒！很乐意帮忙！如果您仍然有问题，我建议您在codepan.io上创建一个最小的工作示例，以便有人可以帮助您更快地调试它。如果我没有看错你的代码，问题是动画持续时间和动画延迟不同步。谢谢你的回复！在第二次迭代中，它开始随机淡出，就像某些东西不同步一样。我正在尝试各种方法，但还没有找到解决办法。CSS是巫毒！很乐意帮忙！如果您仍然有问题，我建议您在codepan.io上创建一个最小的工作示例，以便有人可以帮助您更快地调试它。如果我在浏览代码时没有弄错的话，问题是动画持续时间和动画延迟不同步。