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.