每个迭代具有不同动画距离的SASS迭代

我试图找出正确的公式，使每次迭代转换到不同的位置

假设我有5个，它们都是从一个挨着一个开始的。现在我想使用@keyframes在屏幕上平移它们，但我希望它们在动画结束时停止并移动到不同的位置。所以本质上无论是X，Y还是Z平面，我希望第一次迭代在50px停止，第二次在70px停止，第三次在100px停止，依此类推。如何做到这一点

<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>

我尝试了@keyframes中列出的公式的许多变体，但运气不佳，它们总是并排结束。这是一个可以玩的密码笔

---

提前谢谢

类似的东西

Sass：

div {
  position: relative;
  height: 20px;
  width: 20px;
  background-color: red;
  
  @for $i from 1 through 5 {
    &:nth-of-type(#{$i}) {
      animation: animation#{$i} #{2s - (.2s * ($i - 1))} #{.2s * ($i - 1)} linear forwards;
      
      @keyframes animation#{$i} {
        0% {
          transform: translateX(0);
        }
        100% {
          transform: translateX(#{200px - (20px * ($i - 1))});
        }
      }
    }
  }
}

输出

div{
位置：相对位置；
高度：20px；
宽度：20px；
背景色：红色；
}
分区：第n个类型（1）{
动画：动画1 2s 0s线性向前；
}
@关键帧动画1{
0% {
变换：translateX（0）；
}
100% {
转换：translateX（200px）；
}
}
分区：第n个类型（2）{
动画：动画2 1.8s 0.2s线性向前；
}
@关键帧动画2{
0% {
变换：translateX（0）；
}
100% {
转换：translateX（180px）；
}
}
分区：第n个类型（3）{
动画：动画3 1.6s 0.4s线性向前；
}
@关键帧动画3{
0% {
变换：translateX（0）；
}
100% {
转换：translateX（160px）；
}
}
分区：第n个类型（4）{
动画：动画4 1.4s 0.6s线性向前；
}
@关键帧动画4{
0% {
变换：translateX（0）；
}
100% {
转化：translateX（140px）；
}
}
分区：第n个类型（5）{
动画：动画5 1.2s 0.8s线性向前；
}
@关键帧动画5{
0% {
变换：translateX（0）；
}
100% {
转换：translateX（120px）；
}
}

是的，是的，我想我可以把它变成我真正需要的东西。但我不能100%确定这两个公式的作用#{2s-（.2s*（$i-1））}和#{.2s*（$i-1）}第一个是持续时间，第二个是延迟？非常感谢。没错

{2s-（.2s*（$i-1））}

是持续时间，第一个项目'2s*（1-1）`从2s开始，然后是每个项目的-

.2s

{.2s*（$i-1）}

是延迟，第一次从

0

开始，最后以

.2s*（5-1）

=

.8s

结束，这样，即使开始偏移，每个都能在同一时刻到达目的地，您也可以删除该延迟。我想这正是你想要的，正是我想要的。非常感谢！

div {
  position: relative;
  height: 20px;
  width: 20px;
  background-color: red;
  
  @for $i from 1 through 5 {
    &:nth-of-type(#{$i}) {
      animation: animation#{$i} #{2s - (.2s * ($i - 1))} #{.2s * ($i - 1)} linear forwards;
      
      @keyframes animation#{$i} {
        0% {
          transform: translateX(0);
        }
        100% {
          transform: translateX(#{200px - (20px * ($i - 1))});
        }
      }
    }
  }
}