如何仅用CSS和HTML实现同class图片的依次独立动画？

问题背景 #

现有HTML代码：

<img class='img-logo' src={logo} alt="Logo" />
<img class='img-logo' src={logo} alt="Logo" />
<img class='img-logo' src={logo} alt="Logo" />
<img class='img-logo' src={logo} alt="Logo" />

配套CSS代码：

.img-logo{
  position: absolute;
  top:4% ;left: 60%;
  height: 80px;
  width: 80px;
  animation-name:move_up;
  animation-duration: 6s;
  animation-fill-mode: forwards;
}

@keyframes move_up {
  from{top: 38%;}
    to{top:4%}
}

提问：能否不使用JavaScript，仅通过CSS和HTML实现这些图片依次独立移动，而非同步执行动画？

解决方案：利用animation-delay实现依次启动 #

完全可以，不需要JS，核心是用CSS的animation-delay属性给每个图片设置递增的延迟时间，让它们按顺序启动动画。下面提供两种实现方式：

方式1：为每个图片添加独立类名（需修改HTML）

先给每个图片加上不同的类：

<img class='img-logo logo-item-1' src={logo} alt="Logo" />
<img class='img-logo logo-item-2' src={logo} alt="Logo" />
<img class='img-logo logo-item-3' src={logo} alt="Logo" />
<img class='img-logo logo-item-4' src={logo} alt="Logo" />

然后在CSS中为每个类设置延迟：

.img-logo{
  position: absolute;
  top:4% ;left: 60%;
  height: 80px;
  width: 80px;
  animation-name:move_up;
  animation-duration: 6s;
  animation-fill-mode: forwards;
}

.logo-item-2 { animation-delay: 1.5s; }
.logo-item-3 { animation-delay: 3s; }
.logo-item-4 { animation-delay: 4.5s; }

@keyframes move_up {
  from{top: 38%;}
    to{top:4%}
}

这里的延迟间隔设为1.5s，你可以根据需求调整，让动画衔接更符合预期。

方式2：使用CSS伪类选择器（无需修改HTML）

如果不想改动原有HTML结构，用:nth-child()伪类直接定位每个图片：

.img-logo{
  position: absolute;
  top:4% ;left: 60%;
  height: 80px;
  width: 80px;
  animation-name:move_up;
  animation-duration: 6s;
  animation-fill-mode: forwards;
}

/* 按顺序给第2、3、4张图设置递增延迟 */
.img-logo:nth-child(2) { animation-delay: 1.5s; }
.img-logo:nth-child(3) { animation-delay: 3s; }
.img-logo:nth-child(4) { animation-delay: 4.5s; }

@keyframes move_up {
  from{top: 38%;}
    to{top:4%}
}

如果图片的父元素下还有其他非img元素，可以改用:nth-of-type(img)来精准匹配图片标签，避免选择错误元素。

内容的提问来源于stack exchange，提问作者Jafeth Yahuma