首页 > 解决方案 > 移动多个对象的 CSS 动画

问题描述

我在这里的第一篇文章,我不知道我的代码有什么问题。我的猜测是选择器有问题,我不应该像以前那样使用 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 很陌生。

标签: htmlcsscss-selectorscss-animations

解决方案


从我从您的代码片段中看到的,所有水平块都在相同的垂直高度上堆叠在一起。例如:

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

都放在同一个高度。这是因为您有两个相互冲突的 css 类与animation-name. 即:

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

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

这两个 css 类是冲突的,因此只有动画 h2 是从中选择的.horizontal2,而不是同时使用两者。

一种方法是用自己的动画定义每个块。我将举一个例子,您可以对每个块使用它:

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

推荐阅读