如何在CSS中添加一个又一个的脉冲动画，例如交通灯连续闪烁

Question

我有两个带有无限次脉冲动画的圆圈。现在我需要一个接一个地连续无限次地制作圆的动画。我尝试了无数次脉动圆圈。我添加了延迟动画，但它不起作用，我不知道为什么。请参考代码并帮助实现该功能：

HTML：

<div class="inner">one</div>

<div class="inner1">two</div>

CSS：

.inner {

     width: 74px;

     height: 74px;

     background: #fff;

     border:1px solid #000;

     position: relative;

     text-align:center;

     border-radius: 50%;

     margin-bottom:20px;

     text-align: center;

     -webkit-animation: pulse 1s infinite;

}

 .inner1 {

     width: 74px;

     height: 74px;

     background: #fff;

     border:1px solid #000;

     position: relative;

     border-radius: 50%;

     text-align: center;

     -webkit-animation: pulse 2s infinite;

}

 @-webkit-keyframes pulse {

     0% {

         -webkit-transform: scaleX(1);

         transform: scaleX(1) 

    }

     50% {

         -webkit-transform: scale3d(1.05, 1.05, 1.05);

         transform: scale3d(1.05, 1.05, 1.05) 

    }

     to {

         -webkit-transform: scaleX(1);

         transform: scaleX(1) 

    }

}

 @keyframes pulse {

     0% {

         -webkit-transform: scaleX(1);

         transform: scaleX(1) 

    }

     50% {

         -webkit-transform: scale3d(1.05, 1.05, 1.05);

         transform: scale3d(1.05, 1.05, 1.05) 

    }

     to {

         -webkit-transform: scaleX(1);

         transform: scaleX(1) 

    }

}

 .pulse {

     -webkit-animation-name: pulse;

     animation-name: pulse 

}

提前致谢

Answer 1

您可以将相同的内容添加class到所有圈子以获取共同属性。每个属性唯一需要不同的是animation-delay.您可以使用一个小的 jQuery 代码来为任意数量的 div 设置它。我已经创建了 3 个 div 的示例，但请随意扩展它。let els = $(".inner"),&nbsp; length = $(".inner").lengthels.each(function(index) {&nbsp; $(this).css('animation-delay', (index / length) + 's')}).inner {&nbsp; display: inline-block;&nbsp; vertical-align: top;&nbsp; width: 74px;&nbsp; height: 74px;&nbsp; background: #fff;&nbsp; border: 1px solid #000;&nbsp; position: relative;&nbsp; text-align: center;&nbsp; border-radius: 50%;&nbsp; margin-bottom: 20px;&nbsp; text-align: center;&nbsp; margin: 10px;&nbsp; animation: pulse 1s infinite linear;}@keyframes pulse {&nbsp; 0% {&nbsp; &nbsp; transform: scaleX(1)&nbsp; }&nbsp; 50% {&nbsp; &nbsp; transform: scale3d(1.05, 1.05, 1.05)&nbsp; }&nbsp; to {&nbsp; &nbsp; transform: scaleX(1)&nbsp; }}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="inner">one</div><div class="inner">two</div><div class="inner">three</div>

Answer 2

仅添加动画Delay= .5s；并将第二个动画时间减少 1 秒HTML：<div class="inner">one</div><div class="inner1">two</div>CSS：.inner {&nbsp; &nbsp; &nbsp;width: 74px;&nbsp; &nbsp; &nbsp;height: 74px;&nbsp; &nbsp; &nbsp;background: #fff;&nbsp; &nbsp; &nbsp;border:1px solid #000;&nbsp; &nbsp; &nbsp;position: relative;&nbsp; &nbsp; &nbsp;text-align:center;&nbsp; &nbsp; &nbsp;border-radius: 50%;&nbsp; &nbsp; &nbsp;margin-bottom:20px;&nbsp; &nbsp; &nbsp;text-align: center;&nbsp; &nbsp; &nbsp;-webkit-animation: pulse 1s infinite;}&nbsp;.inner1 {&nbsp; &nbsp; &nbsp;width: 74px;&nbsp; &nbsp; &nbsp;height: 74px;&nbsp; &nbsp; &nbsp;background: #fff;&nbsp; &nbsp; &nbsp;border:1px solid #000;&nbsp; &nbsp; &nbsp;position: relative;&nbsp; &nbsp; &nbsp;border-radius: 50%;&nbsp; &nbsp; &nbsp;text-align: center;&nbsp; &nbsp; &nbsp;-webkit-animation: pulse 1s infinite;&nbsp; &nbsp; &nbsp;animation-delay: .5s;}&nbsp;@-webkit-keyframes pulse {&nbsp; &nbsp; &nbsp;0% {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;-webkit-transform: scaleX(1);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;transform: scaleX(1)&nbsp;&nbsp; &nbsp; }&nbsp; &nbsp; &nbsp;50% {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;-webkit-transform: scale3d(1.05, 1.05, 1.05);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;transform: scale3d(1.05, 1.05, 1.05)&nbsp;&nbsp; &nbsp; }&nbsp; &nbsp; &nbsp;to {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;-webkit-transform: scaleX(1);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;transform: scaleX(1)&nbsp;&nbsp; &nbsp; }}&nbsp;@keyframes pulse {&nbsp; &nbsp; &nbsp;0% {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;-webkit-transform: scaleX(1);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;transform: scaleX(1)&nbsp;&nbsp; &nbsp; }&nbsp; &nbsp; &nbsp;50% {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;-webkit-transform: scale3d(1.05, 1.05, 1.05);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;transform: scale3d(1.05, 1.05, 1.05)&nbsp;&nbsp; &nbsp; }&nbsp; &nbsp; &nbsp;to {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;-webkit-transform: scaleX(1);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;transform: scaleX(1)&nbsp;&nbsp; &nbsp; }}&nbsp;.pulse {&nbsp; &nbsp; &nbsp;-webkit-animation-name: pulse;&nbsp; &nbsp; &nbsp;animation-name: pulse&nbsp;}

Answer 3

animation-delay工作中：.inner {&nbsp; width: 74px;&nbsp; height: 74px;&nbsp; background: #fff;&nbsp; border: 1px solid #000;&nbsp; position: relative;&nbsp; text-align: center;&nbsp; border-radius: 50%;&nbsp; margin-bottom: 20px;&nbsp; text-align: center;&nbsp; -webkit-animation: pulse 1s infinite;}.inner1 {&nbsp; width: 74px;&nbsp; height: 74px;&nbsp; background: #fff;&nbsp; border: 1px solid #000;&nbsp; position: relative;&nbsp; border-radius: 50%;&nbsp; text-align: center;&nbsp; -webkit-animation: pulse 2s infinite;&nbsp; animation-delay: 5s}@-webkit-keyframes pulse {&nbsp; 0% {&nbsp; &nbsp; -webkit-transform: scaleX(1);&nbsp; &nbsp; transform: scaleX(1)&nbsp; }&nbsp; 50% {&nbsp; &nbsp; -webkit-transform: scale3d(1.05, 1.05, 1.05);&nbsp; &nbsp; transform: scale3d(1.05, 1.05, 1.05)&nbsp; }&nbsp; to {&nbsp; &nbsp; -webkit-transform: scaleX(1);&nbsp; &nbsp; transform: scaleX(1)&nbsp; }}@keyframes pulse {&nbsp; 0% {&nbsp; &nbsp; -webkit-transform: scaleX(1);&nbsp; &nbsp; transform: scaleX(1)&nbsp; }&nbsp; 50% {&nbsp; &nbsp; -webkit-transform: scale3d(1.05, 1.05, 1.05);&nbsp; &nbsp; transform: scale3d(1.05, 1.05, 1.05)&nbsp; }&nbsp; to {&nbsp; &nbsp; -webkit-transform: scaleX(1);&nbsp; &nbsp; transform: scaleX(1)&nbsp; }}.pulse {&nbsp; -webkit-animation-name: pulse;&nbsp; animation-name: pulse}<div class="inner">one</div><div class="inner1">two</div>