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>

.block {
  position:absolute;
  left:10%;
  width:20px;
  height:20px;
  background:red;
  animation:animate 2s linear forwards;
  
  @for $i from 1 through 5 {
    $delay: calc(.3s * (#{$i}));
    &:nth-child(#{$i}) {
      top: calc(20px * (#{$i}));
      animation-delay:$delay;
  }
    @keyframes animate {
      0%{transform:translate3d(0,0);}
      100%{transform:translate3d(calc(20px * (#{$i})),0);}
    }
  }
}

我尝试了@keyframes中列出的公式的多种变体，但是幸运的是，它们总是以彼此相邻的方式结束。这是一个可使用的Codepen。 https://codepen.io/jfirestorm44/pen/eYZewXd?editors=1100

预先感谢

解决方法

与此类似？ Codepen。

无礼：

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 {
  position: relative;
  height: 20px;
  width: 20px;
  background-color: red;
}
div:nth-of-type(1) {
  animation: animation1 2s 0s linear forwards;
}
@keyframes animation1 {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(200px);
  }
}
div:nth-of-type(2) {
  animation: animation2 1.8s 0.2s linear forwards;
}
@keyframes animation2 {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(180px);
  }
}
div:nth-of-type(3) {
  animation: animation3 1.6s 0.4s linear forwards;
}
@keyframes animation3 {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(160px);
  }
}
div:nth-of-type(4) {
  animation: animation4 1.4s 0.6s linear forwards;
}
@keyframes animation4 {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(140px);
  }
}
div:nth-of-type(5) {
  animation: animation5 1.2s 0.8s linear forwards;
}
@keyframes animation5 {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(120px);
  }
}

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>