CSS动画移动多个对象

问题描述 投票：1回答：1

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

我正在尝试制作动画：

  1. 平方开始于左上角
  2. 下降到4行
  3. 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“块”不会移动，并且您只能看到第一行向右移动。

如果可以用更少的代码来完成类似的工作，我将很乐意提供帮助和建议。我对CSS很陌生。

html css css-selectors css-animations
1个回答
0
投票

我认为您还没有完全完成代码。如果我是CRT，这就是你的输出是1.前4个垂直方块。2.从这4个垂直方格到正确的动画，使其变成12列方格，共48个方格

我是对的，那么您只完成了第一个垂直正方形的第一列。您需要完成接下来的3个垂直方块才能实现这些目标。

对不起，我的CSS不好，回答不当

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.