Html 移动多个对象的CSS动画

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

我正在尝试制作动画：

正方形从左角开始

下降到4行

4行向右移动，形成12列

正文{
对齐项目：居中；
显示器：flex；
证明内容：中心；
高度：100vh；
}
.主集装箱{
背景：aliceblue；
高度：115px；
宽度：355px；
位置：相对位置；
}
.垂直{
背景：黑色；
高度：25px；
宽度：25px；
位置：绝对位置；
动画填充模式：正向；
动画持续时间：0.5s；
}
.水平{
背景：黑色；
高度：25px；
宽度：25px；
位置：绝对位置；
动画填充模式：正向；
动画持续时间：0.1s；
}
.垂直2{
动画名称：v2；
}
.垂直3{
动画名称：v3；
动画延迟：0.5s；
}
.垂直的{
动画名称：v4；
动画延迟：1s；
}
.水平1{
动画名称：h1；
动画延迟：1.5s；
}
.水平2{
动画名称：h2；
动画延迟：1.6s；
}
.水平3{
动画名称：h3；
动画延迟：1.7秒；
}
.水平4{
动画名称：h4；
动画延迟：1.8s；
}
.水平5{
动画名称：h5；
动画延迟：1.9秒；
}
.水平6{
动画名称：h6；
动画延迟：2s；
}
.横向7{
动画名称：h7；
动画延迟：2.1s；
}
.水平8{
动画名称：h8；
动画延迟：2.2s；
}
.水平9{
动画名称：h9；
动画延迟：2.3s；
}
.水平10{
动画名称：h10；
动画延迟：2.4s；
}
.横向11{
动画名称：h11；
动画延迟：2.5s；
}
@关键帧v2{
0% {
背景色：黑色；
顶部：0px；
}
100% {
背景色：黑色；
顶部：30px；
}
}
@关键帧v3{
0% {
背景色：黑色；
顶部：30px；
}
100% {
背景色：黑色；
顶部：60px；
}
}
@关键帧v4{
0% {
背景色：黑色；
顶部：60px；
}
100% {
背景色：黑色；
顶部：90px；
}
}
@关键帧h1{
0% {
背景色：黑色；
左：0px；
}
100% {
背景色：黑色；
左：30px；
}
}
@关键帧h2{
0% {
背景色：黑色；
左：30px；
}
100% {
背景色：黑色；
左：60px；
}
}
@关键帧h3{
0% {
背景色：黑色；
左：60px；
}
100% {
背景色：黑色；
左：90px；
}
}
@关键帧h4{
0% {
背景色：黑色；
左：90px；
}
100% {
背景色：黑色；
左：120px；
}
}
@关键帧h5{
0% {
背景色：黑色；
左：120px；
}
100% {
背景色：黑色；
左：150px；
}
}
@关键帧h6{
0% {
背景色：黑色；
左：150px；
}
100% {
背景色：黑色；
左：180像素；
}
}
@关键帧h7{
0% {
背景色：黑色；
左：180像素；
}
100% {
背景色：黑色；
左：210像素；
}
}
@关键帧h8{
0% {
背景色：黑色；
左：210像素；
}
100% {
背景色：黑色；
左：240px；
}
}
@关键帧h9{
0% {
背景色：黑色；
左：240px；
}
100% {
背景色：黑色；
左：270px；
}
}
@关键帧h10{
0% {
背景色：黑色；
左：270px；
}
100% {
背景色：黑色；
左：300px；
}
}
@关键帧h11{
0% {
背景色：黑色；
左：300px；
}
100% {
背景色：黑色；
左：330px；
}
}

文件

这里有一个想法，代码更少，你可以依靠背景动画，只需要一个元素

.box{
背景：aliceblue；
高度：115px；
宽度：355px；
位置：相对位置；
保证金：50px自动；
背景：
重复线性渐变（向右，#000 0 25px，透明25px 30px），
重复线性渐变（向右，#000 0 25px，透明25px 30px），
重复线性渐变（向右，#000 0 25px，透明25px 30px），
重复线性渐变（向右，#000 0 25px，透明25px 30px），
aliceblue；
背景重复：无重复；
动画：向前改变3s；
}
@关键帧改变{
0% {
背景尺寸：25px 25px；
背景位置：
0计算（0*100%/3），
0计算（0*100%/3），
0计算（0*100%/3），
0计算（0*100%/3）；
}
20% {
背景尺寸：25px 25px；
背景位置：
0计算（0*100%/3），
0计算（1*100%/3），
0计算（1*100%/3），
0计算（1*100%/3）；
}
30% {
背景尺寸：25px 25px；
背景位置：
0计算（0*100%/3），
0计算（1*100%/3），
0计算（2*100%/3），
0计算（2*100%/3）；
}
50% {
背景尺寸：25px 25px；
背景位置：
0计算（0*100%/3），
0计算（1*100%/3），
0计算（2*100%/3），
0计算（3*100%/3）；
}
100% {
背景尺寸：100%25px；
背景位置：
0计算（0*100%/3），
0计算（1*100%/3），
0计算（2*100%/3），
0计算（3*100%/3）；
}
}

---

从您的代码片段中我看到，所有水平块都堆叠在同一垂直高度上。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>

这两个css类相互冲突，因此只能从

.horizontal2

中选择动画h2，而不是同时使用这两个类

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

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

---

非常感谢你。从现在开始，背景属性看起来是一种发展方向。我将尝试找到更多关于它的信息，并尝试使用此方法制作更多动画。@Alp3n这里是一个g

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