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

Question

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'?

schmauch · Accepted Answer · 2021-09-16 07:02:05Z

3

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

answered Sep 16, 2021 at 7:02

schmauch

8001 gold badge9 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Aniketh Malyala · Accepted Answer · 2021-09-16 07:06:17Z

2

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){

answered Sep 16, 2021 at 7:06

Aniketh Malyala

2,6451 gold badge8 silver badges14 bronze badges

Comments

shotgun02 · Accepted Answer · 2021-09-16 07:44:23Z

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>

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related