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

Question

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

.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>

不过，我打算做四个这样的小立方体，我希望它们从每个角开始。当然，我可以通过添加另一个 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% 'ahead'。有没有办法添加第 3、第 4 或第 N 个立方体，它们是帧的 25%、75% 或 X% 'ahead'?

Answer 1

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

Answer 2

你可以做这样的事情：

.parent img:nth-child(1){
    animation-delay: 0s; /* change this to something else for each */
 }

要更改动画延迟，更改开始的秒数，并更改所需的特定立方体，将顶部的参数更改为如下内容：

.parent img:nth-child(2){

Answer 3

是的。 animation-delay 会起作用。

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

}
.parent .child:nth-child(1){
    animation-delay: 0s; 
 } 
 .parent .child:nth-child(2){
    animation-delay: -1.25s; 
 }
 .parent .child:nth-child(3){
    animation-delay: -2.5s; 
 }
 .parent .child:nth-child(4){
    animation-delay: -3.75s; 
 }
.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 class='child'></div>
  <div class='child'></div>
  <div class='child'></div>
</div>

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

How to re-use animations in CSS at different points within the keyframes?

css

css-animations