css - 如何在关键帧内的不同点重复使用 CSS 动画？

Question

我的目的是制作一个包含四个较小子立方体的父方 block 。我想要一个动画让这四个较小的立方体在父立方体中移动。我首先制作一个立方体并像这样移动它:

.parent {
  background-color: aliceblue;
  height: 400px;
  width: 400px;
  margin: 25px;
  padding: 25px;

}
.child{
  background: black;
  position: absolute;
  height:100px;
  width:100px;
  animation: move_around 5s ease-in-out infinite backwards;
}

@keyframes move_around {
  0% {
      transform: translateX(0%);
  }
  25% {
      transform:translateY(300%);
  }
  50% {
      transform:translateY(300%) translateX(300%);
  }
  75% {
      transform: translateX(300%);
  }
} 

<div class="parent">
    <div class='child'></div> 
</div>

但是，我的目的是制作四个小立方体，并且我希望它们从每个 Angular 开始。当然，我可以通过添加另一个 child 并向其添加新的自定义动画来手动添加另一个立方体，如下所示:

.parent {
    background-color: aliceblue;
    height: 400px;
    width: 400px;
    margin: 100px;
    padding: 25px;
}
.child{
    background: black;
    position: absolute;
    height:100px;
    width:100px;
}

.top {
    animation: move_around 5s ease-in-out infinite backwards
} 
.bot {
    animation: move_around_bot 5s ease-in-out infinite backwards
}


@keyframes move_around {
    0% {
        transform: translateX(0%);
    }
    25% {
        transform:translateY(300%);
    }
    50% {
        transform:translateY(300%) translateX(300%);
    }
    75% {
        transform: translateX(300%);
    }
} 

@keyframes move_around_bot {
    0% {
        transform:translateY(300%) translateX(300%);
    }
     25% {
        transform: translateY(0%) translateX(300%);
    } 
    50% {
        transform: translateY(0%) translateX(0%)
    }
    75% {
        transform: translateX(0%) translateY(300%);
    }
    100% {
        transform:translateY(300%) translateX(300%);
    }
}  

<div class="parent">
    <div class='child top'></div> 
    <div class='child bot'></div>
</div>

但是，这似乎不是最好的方法。现在我有两个，线路数量增加了一倍多。四个立方体是否需要双倍的线条数量？如果我想要更多的立方体怎么办？我的方法看起来不太有用。

我意识到这里的第二个立方体与第一个立方体相同，只是它的动画基本上是“前方”帧的 50%。有没有办法添加第 3 个、第 4 个或第 N 个立方体，它们位于“前方”帧的 25%、75% 或 X%？

Answer 1

您可以对第二个立方体使用 animation-delay: -1.25s，对第三个立方体使用 -2.5s，对第三个立方体使用 -3.75s最后一张。