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

My intention is to make a parent square which contain four smaller child cubes. I would want an animation to have those four smaller cubes move around within the parent cube. I first make one cube and move it around like so:

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

However, my intention is to make four of those little cubes, and I want them to start at each corner. Of course I could manually add another cube by adding another child and adding a new custom animation to it, like so:

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

However, this does not seem like the best way. Now I have two, with more then double the amount of lines. Would it need double again the amount of lines for four cubes? What if I want even more cubes? My approach does not seem very usable in this way.

I realized that the second cube here is identical to the first cube, except that its animation is basically 50% of the frames 'ahead'. Is there a way to add a 3rd, 4th or Nth cube that are 25%, 75% or X% of the frames 'ahead'?

CodePudding user response：

You could use animation-delay: -1.25s for the second cube, -2.5s for the third and -3.75s for the last one.

CodePudding user response：

You could make something like:

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

To change the animation-delay, change the seconds u start at, and to change the specific cube you want, change the parameter at the top to something like:

.parent img:nth-child(2){

CodePudding user response：

Yes. animation-delay will work.

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