CSS animation moving multiple objects

Question

My first post here and I have no idea what's wrong with my code. My guess is that something is wrong with the selectors and I shouldn't use 3 class as I did.

I'm trying to do the animation:

Square starts at the left corner
Goes down to 4 rows
4 rows go to the right making 12 columns

body {
  align-items: center;
  display: flex;
  justify-content: center;
  height: 100vh;
}

.mainContainer {
  background: aliceblue;
  height: 115px;
  width: 355px;
  position: relative;
}

.vertical {
  background: black;
  height: 25px;
  width: 25px;
  position: absolute;
  animation-fill-mode: forwards;
  animation-duration: 0.5s;
}

.horizontal {
  background: black;
  height: 25px;
  width: 25px;
  position: absolute;
  animation-fill-mode: forwards;
  animation-duration: 0.1s;
}

.vertical2 {
  animation-name: v2;
}

.vertical3 {
  animation-name: v3;
  animation-delay: 0.5s;
}

.vertical4 {
  animation-name: v4;
  animation-delay: 1s;
}

.horizontal1 {
  animation-name: h1;
  animation-delay: 1.5s;
}

.horizontal2 {
  animation-name: h2;
  animation-delay: 1.6s;
}

.horizontal3 {
  animation-name: h3;
  animation-delay: 1.7s;
}

.horizontal4 {
  animation-name: h4;
  animation-delay: 1.8s;
}

.horizontal5 {
  animation-name: h5;
  animation-delay: 1.9s;
}

.horizontal6 {
  animation-name: h6;
  animation-delay: 2s;
}

.horizontal7 {
  animation-name: h7;
  animation-delay: 2.1s;
}

.horizontal8 {
  animation-name: h8;
  animation-delay: 2.2s;
}

.horizontal9 {
  animation-name: h9;
  animation-delay: 2.3s;
}

.horizontal10 {
  animation-name: h10;
  animation-delay: 2.4s;
}

.horizontal11 {
  animation-name: h11;
  animation-delay: 2.5s;
}

@keyframes v2 {
  0% {
    background-color: black;
    top: 0px;
  }
  100% {
    background-color: black;
    top: 30px;
  }
}

@keyframes v3 {
  0% {
    background-color: black;
    top: 30px;
  }
  100% {
    background-color: black;
    top: 60px;
  }
}

@keyframes v4 {
  0% {
    background-color: black;
    top: 60px;
  }
  100% {
    background-color: black;
    top: 90px;
  }
}

@keyframes h1 {
  0% {
    background-color: black;
    left: 0px;
  }
  100% {
    background-color: black;
    left: 30px;
  }
}

@keyframes h2 {
  0% {
    background-color: black;
    left: 30px;
  }
  100% {
    background-color: black;
    left: 60px;
  }
}

@keyframes h3 {
  0% {
    background-color: black;
    left: 60px;
  }
  100% {
    background-color: black;
    left: 90px;
  }
}

@keyframes h4 {
  0% {
    background-color: black;
    left: 90px;
  }
  100% {
    background-color: black;
    left: 120px;
  }
}

@keyframes h5 {
  0% {
    background-color: black;
    left: 120px;
  }
  100% {
    background-color: black;
    left: 150px;
  }
}

@keyframes h6 {
  0% {
    background-color: black;
    left: 150px;
  }
  100% {
    background-color: black;
    left: 180px;
  }
}

@keyframes h7 {
  0% {
    background-color: black;
    left: 180px;
  }
  100% {
    background-color: black;
    left: 210px;
  }
}

@keyframes h8 {
  0% {
    background-color: black;
    left: 210px;
  }
  100% {
    background-color: black;
    left: 240px;
  }
}

@keyframes h9 {
  0% {
    background-color: black;
    left: 240px;
  }
  100% {
    background-color: black;
    left: 270px;
  }
}

@keyframes h10 {
  0% {
    background-color: black;
    left: 270px;
  }
  100% {
    background-color: black;
    left: 300px;
  }
}

@keyframes h11 {
  0% {
    background-color: black;
    left: 300px;
  }
  100% {
    background-color: black;
    left: 330px;
  }
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" type="text/css" href="style.css">
  <title>Document</title>
</head>

<body>
  <div class="mainContainer">
    <div id="block1" class="vertical"></div>
    <div id="block2" class="vertical vertical2"></div>
    <div id="block3" class="vertical vertical3"></div>
    <div id="block4" class="vertical vertical4"></div>

    <div id="block5" class="horizontal horizontal1 vertical1"></div>
    <div id="block6" class="horizontal horizontal1 vertical2"></div>
    <div id="block7" class="horizontal horizontal1 vertical3"></div>
    <div id="block8" class="horizontal horizontal1 vertical4"></div>

    <div id="block9" class="horizontal horizontal2 vertical1"></div>
    <div id="block10" class="horizontal horizontal2 vertical2"></div>
    <div id="block11" class="horizontal horizontal2 vertical3"></div>
    <div id="block12" class="horizontal horizontal2 vertical4"></div>

    <div id="block13" class="horizontal horizontal3 vertical1"></div>
    <div id="block14" class="horizontal horizontal3 vertical2"></div>
    <div id="block15" class="horizontal horizontal3 vertical3"></div>
    <div id="block16" class="horizontal horizontal3 vertical4"></div>

    <div id="block17" class="horizontal horizontal4 vertical1"></div>
    <div id="block18" class="horizontal horizontal4 vertical2"></div>
    <div id="block19" class="horizontal horizontal4 vertical3"></div>
    <div id="block20" class="horizontal horizontal4 vertical4"></div>

    <div id="block21" class="horizontal horizontal5 vertical1"></div>
    <div id="block22" class="horizontal horizontal5 vertical2"></div>
    <div id="block23" class="horizontal horizontal5 vertical3"></div>
    <div id="block24" class="horizontal horizontal5 vertical4"></div>

    <div id="block25" class="horizontal horizontal6 vertical1"></div>
    <div id="block26" class="horizontal horizontal6 vertical2"></div>
    <div id="block27" class="horizontal horizontal6 vertical3"></div>
    <div id="block28" class="horizontal horizontal6 vertical4"></div>

    <div id="block29" class="horizontal horizontal7 vertical1"></div>
    <div id="block30" class="horizontal horizontal7 vertical2"></div>
    <div id="block31" class="horizontal horizontal7 vertical3"></div>
    <div id="block32" class="horizontal horizontal7 vertical4"></div>

    <div id="block33" class="horizontal horizontal8 vertical1"></div>
    <div id="block34" class="horizontal horizontal8 vertical2"></div>
    <div id="block35" class="horizontal horizontal8 vertical3"></div>
    <div id="block36" class="horizontal horizontal8 vertical4"></div>

    <div id="block37" class="horizontal horizontal9 vertical1"></div>
    <div id="block38" class="horizontal horizontal9 vertical2"></div>
    <div id="block39" class="horizontal horizontal9 vertical3"></div>
    <div id="block40" class="horizontal horizontal9 vertical4"></div>

    <div id="block41" class="horizontal horizontal10 vertical1"></div>
    <div id="block42" class="horizontal horizontal10 vertical2"></div>
    <div id="block43" class="horizontal horizontal10 vertical3"></div>
    <div id="block44" class="horizontal horizontal10 vertical4"></div>

    <div id="block45" class="horizontal horizontal11 vertical1"></div>
    <div id="block46" class="horizontal horizontal11 vertical2"></div>
    <div id="block47" class="horizontal horizontal11 vertical3"></div>
    <div id="block48" class="horizontal horizontal11 vertical4"></div>
  </div>
</body>

</html>

My .vertical2/.vertical3/.vertical4 "blocks" do not move and as you can see only the first row moves to the right.

I will be glad for any help and maybe suggestions if something like this is possible to make with less code. I am pretty new to CSS.

score 2 · Accepted Answer · answered Dec 06 '19 at 12:02

Here is an idea with less of code where you can rely on background animation and only one element

.box {
  background: aliceblue;
  height: 115px;
  width: 355px;
  position: relative;
  margin:50px auto;
  background:
    repeating-linear-gradient(to right, #000 0 25px,transparent 25px 30px),
    repeating-linear-gradient(to right, #000 0 25px,transparent 25px 30px),
    repeating-linear-gradient(to right, #000 0 25px,transparent 25px 30px),
    repeating-linear-gradient(to right, #000 0 25px,transparent 25px 30px),
    aliceblue;
   background-repeat:no-repeat;
   animation:change 3s forwards;
}

@keyframes change{
   0% {
     background-size: 25px 25px;
     background-position: 
        0 calc(0*100%/3),
        0 calc(0*100%/3),
        0 calc(0*100%/3),
        0 calc(0*100%/3);
   }
   20% {
     background-size: 25px 25px;
     background-position:
       0 calc(0*100%/3),
       0 calc(1*100%/3),
       0 calc(1*100%/3),
       0 calc(1*100%/3);
   }
   30% {
     background-size: 25px 25px;
     background-position:
       0 calc(0*100%/3),
       0 calc(1*100%/3),
       0 calc(2*100%/3),
       0 calc(2*100%/3);
   }
   50% {
     background-size: 25px 25px;
     background-position:
       0 calc(0*100%/3),
       0 calc(1*100%/3),
       0 calc(2*100%/3),
       0 calc(3*100%/3);
   }
   100% {
     background-size:100% 25px;
     background-position:
       0 calc(0*100%/3),
       0 calc(1*100%/3),
       0 calc(2*100%/3),
       0 calc(3*100%/3);
     }
}

<div class="box">

</div>

Thank you so much. Background properties look like a way to go from now on. I will try to find more about it and try to make more animations using this method. — Alp3n, Dec 06 '19 at 12:14
@Alp3n here is a good reading to get some tricks around background properties: https://stackoverflow.com/a/51734530/8620333 — Temani Afif, Dec 06 '19 at 12:17

score 1 · Answer 2 · answered Dec 06 '19 at 12:05

From what I see from your code snippet, all horizontal blocks are stacked together on the same vertical height. e.g. :

<div id="block5" class="horizontal horizontal1 vertical1"></div>
<div id="block6" class="horizontal horizontal1 vertical2"></div>
<div id="block7" class="horizontal horizontal1 vertical3"></div>
<div id="block8" class="horizontal horizontal1 vertical4"></div>

Are all put on the same height. This is because you have two conflicting css classes with animation-name. Namely:

.horizontal2 {
    animation-name: h2;
    animation-delay: 1.6s;
}

.vertical4 {
    animation-name: v4;
    animation-delay: 1s;
}

These two css classes are conflicting and as a result only the animation h2 is chosen from .horizontal2, instead of using both.

One way would be to define each block with its own animation. I will give an example for one, you could use this for each block:

.vertical2.horizontal1 {
  animation-name: v2h1;
}
@keyframes v2h1 {
  0% {
    background-color: black;
    top: 0px;
    left: 0px;
  }
  100% {
    background-color: black;
    top: 30px;
    left: 30px;
  }
}

I was considering your method but I didn't like that I would need 48 separate "snippets". That is why I created many classes so I could make it shorter. Also, I found that my horizontal animation is later than vertical with the same elements in the code so CSS will execute the last one but need to think how to make it correctly. — Alp3n, Dec 06 '19 at 12:18

CSS animation moving multiple objects

2 Answers2