html - 单个 HTML 元素中的 CSS 动画

Question

我有这个 CSS 加载器:

http://jsfiddle.net/SPFgH/3/

HTML:

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

CSS:

#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;
    }
}

我需要将其转换为具有单个 HTML 元素的 CSS 动画。 我可以使用 :before 和 :after 伪元素来添加 8 个子元素中的 2 个，但如何添加所有 8 个元素？

Answer 1

如果您只需要一个 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;
    }
}

试试这个，看看你试过没有