CSS3利用animation动画实现多个图标在指定间隔后再次动作

一、实现思路：

        当有多个图标要实现同一 animation ，但是每个图标的 animation 又不能互相干扰，可以利用以下这个公式去设置动画的属性

        @keyframes 动画名称 选择百分比实现

@keyframes 动画名称 {
    0% { 
        // 具体动画实现效果    
    }
    （1 / 总共要实现动画的元素个数）% { 
        // 恢复的正常状态
    }
    100% { 
        // 恢复的正常状态
    }
}

        具体动画的元素的 animation 属性设置：

                动画的 duration 时长  = 预期动画时长 * 总共要实现动画的元素

                动画的 delay 时长 = 动画时长 duration * （1 / 总共要实现动画的元素）

二、实现例子

         动画效果：三个图标要各自scale、变换color，但同时只有一个图标有该效果，且第一个图标效果消失后，下一个图标就实现效果，如此循环往复。

        

         代码实现：

                动画的 duration 时长 = （预期实现效果时长）0.5 s * 3 = 1.5 s 

                动画的 delay 时长 = 1.5 s * 1 / 3 = 0.5 s

                @keyframes 的分隔百分比为：1 / 3 = 33%

<div class="switchOrder" v-if="order.isSwitching">
    <div class="switchOrder-title">切换中...</div>
    <div class="switchOrder-sign">
        <i class="iconfont icon-youyou-"></i>
        <i class="iconfont icon-youyou-"></i>
        <i class="iconfont icon-youyou-"></i>
    </div>
</div>

.switchOrder {
    width: 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

@keyframes switchOrderAnimation {
    0% { 
        color: orange;
        transform: scale(1.2);
     }
    33% { 
        color: white; 
        transform: scale(1);
    }
    66% {
        transform: scale(0.8);
    }
    100% { 
        color: white; 
        transform: scale(1);
    }
}

.switchOrder .switchOrder-sign i {
    width: 23px;
    height: 23px;
    display: inline-block;
    font-size: 23px;
    color: white;
}

.switchOrder .switchOrder-sign i:nth-child(1) {
    animation: switchOrderAnimation 1.5s 0s infinite;
}

.switchOrder .switchOrder-sign i:nth-child(2) {
    animation: switchOrderAnimation 1.5s .5s infinite;
}

.switchOrder .switchOrder-sign i:nth-child(3) {
    animation: switchOrderAnimation 1.5s 1s infinite;
}