如何在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"),

  length = $(".inner").length

els.each(function(index) {

  $(this).css('animation-delay', (index / length) + 's')

})

.inner {

  display: inline-block;

  vertical-align: top;

  width: 74px;

  height: 74px;

  background: #fff;

  border: 1px solid #000;

  position: relative;

  text-align: center;

  border-radius: 50%;

  margin-bottom: 20px;

  text-align: center;

  margin: 10px;

  animation: pulse 1s infinite linear;

}

@keyframes pulse {

  0% {

    transform: scaleX(1)

  }

  50% {

    transform: scale3d(1.05, 1.05, 1.05)

  }

  to {

    transform: scaleX(1)

  }

}

<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 {

     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 1s infinite;

     animation-delay: .5s;

}

 @-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 3

animation-delay工作中：

.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;

  animation-delay: 5s

}

@-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

}

<div class="inner">one

</div>

<div class="inner1">two

</div>