单个HTML元素中的CSS动画

我有一个CSS加载器：

HTML：

<div id="fountainG"> <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>

#fountainG {
    position:relative;
    margin-left: calc(50% - 120px);
    width:240px;
    height:29px
}
#fountainG i {
    position:absolute;
    top:0;
    background-color:#A300A3;
    width:29px;
    height:29px;
    animation-name:bounce_fountainG;
    animation-duration:1.3s;
    animation-iteration-count:infinite;
    animation-direction:linear;
    transform:scale(.3);
    border-radius:19px;
}
#fountainG i:nth-child(1) {
    left:0;
    animation-delay:0.52s;
}
#fountainG i:nth-child(2) {
    left:30px;
    animation-delay:0.65s;
}
#fountainG i:nth-child(3) {
    left:60px;
    animation-delay:0.78s;
}
#fountainG i:nth-child(4) {
    left:90px;
    -webkit-animation-delay:0.91s;
    -ms-animation-delay:0.91s;
}
#fountainG i:nth-child(5) {
    left:120px;
    -webkit-animation-delay:1.04s;
    -ms-animation-delay:1.04s;
}
#fountainG i:nth-child(6) {
    left:150px;
    animation-delay:1.17s;
}
#fountainG i:nth-child(7) {
    left:180px;
    animation-delay:1.3s;
}
#fountainG i:nth-child(8) {
    left:210px;
    animation-delay:1.43s;
}
@keyframes bounce_fountainG {
    0% {
        transform:scale(1);
        background-color:#A300A3;
    }
    100% {
        transform:scale(.3);
        background-color:#999999;
    }
}

我需要将它转换为一个CSS动画与一个HTML元素。

---

我可以使用

：before

和

：after

伪元素来添加8个子元素中的2个，但是如何添加所有8个元素集呢？

如果您需要仅使用一个I标记的动画

#fountainG {
    position:relative;
    margin-left: calc(50% - 120px);
    width:240px;
    height:29px
}
#fountainG i {
    position:absolute;
    top:0;
    background-color:#A300A3;
    width:29px;
    height:29px;
    animation-name:bounce_fountainG;
    animation-duration:1.3s;
    animation-iteration-count:infinite;
    animation-direction:linear;
    transform:scale(.3);
    border-radius:19px;
}
#fountainG i:nth-child(1) {
    left:0;
    animation-delay:0.52s;
}

@keyframes bounce_fountainG {
    0% {
        transform:scale(1);
        background-color:#A300A3;
    }
    100% {
        transform:scale(.3);
        background-color:#999999;
    }
}

---

试试看，你试过了吗？这真的是一个不清楚的问题。顺便说一句，你没有使用传统的

动画延迟

等，只有

webkit

和

ms

，所以它对FF不起作用。有什么不清楚的？我希望这个动画只有一个HTML元素，而不是有9个元素，我想知道是否有可能在某种程度上使用CSS的解决方案。我现在不关心交叉兼容性，这不是问题的重点。据我所知，这是不可能的。您可以将动画转换为GIF并将其设置为元素的背景。我很确定这是你能用一个HTML元素来实现这个动画的唯一方法。事实上这是可行的，但是只有当你添加几个I标签时，外观才会保持，谢谢这个动画对我也很有用！