html - 移动多个对象的 CSS 动画

我在这里发表的第一篇文章，我不知道我的代码有什么问题。我的猜测是选择器出了问题，我不应该像我那样使用 3 类。

我正在尝试制作动画:

正方形从左上角开始
减少到 4 行
向右移动 4 行，形成 12 列

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>

我的.vertical2/.vertical3/.vertical4“ block ”没有移动，正如您所看到的，只有第一行向右移动。

如果可以用更少的代码来完成这样的事情，我将很高兴获得任何帮助和建议。我对 CSS 还很陌生。

最佳答案

这是一个代码较少的想法，您可以依靠背景动画和仅一个元素

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

关于html - 移动多个对象的 CSS 动画，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59212419/

html - 移动多个对象的 CSS 动画

上一篇：html - 有没有办法使用 bootstrap 将行中的 div 元素对齐到特定列中？

下一篇：html - 将鼠标悬停在 SVG 上可更改颜色