CODEWITHSUNDEEP
htmlcssanimationcss-animations
sandeep v
sandeep v

Reputation: 43

how to add pulse animation with one after other in css like traffic lights blinks continously

I have two circles with pulse animation infinite times. Now I need animating the circle one after another continuously with infinite times. I tried pulsation the circle infinite times. I have added delay animation but it is not working I don't why. Please kindly refer the code and help to achieve that functionality:

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 
}

thanks in advance

Upvotes: 1

Views: 3335

Answers (3)

Haris Amjad
Haris Amjad

Reputation: 1

Only Add animation Delay= .5s; and reduce second animation time with 1s

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 
}

Upvotes: 0

Anurag Srivastava
Anurag Srivastava

Reputation: 14423

You can add the same class to all circles for common properties. The only properties you need different for each is animation-delay.

You can use a small jQuery code to set that for any number of divs. I have created an example for 3 divs, but feel free to extend it.

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>

Upvotes: 1

Hans Felix Ramos
Hans Felix Ramos

Reputation: 4434

animation-delay is working:

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

Upvotes: 0

Related Questions