angular - How to add animation effect on bubbles in datamaps angular 8?

Question

I am looking to add animation effect on the bubbles in the svg map using the datamaps in angular 8. the bubbles are displayed correctly but the animation is not working. This is what I have tried so far

.bubbles circle.datamaps-bubble  {
  -webkit-animation: ripple 0.7s linear infinite;
      animation: ripple 0.7s linear infinite;
}
@-webkit-keyframes ripple {
  0% {
      box-shadow: 0 0 0 0 rgba(101, 255, 120, 0.3), 0 0 0 1em rgba(101, 255, 120, 0.3), 0 0 0 3em rgba(101, 255, 120, 0.3), 0 0 0 5em rgba(101, 255, 120, 0.3);
 }
 100% {
   box-shadow: 0 0 0 1em rgba(101, 255, 120, 0.3), 0 0 0 3em rgba(101, 255, 120, 0.3), 0 0 0 5em rgba(101, 255, 120, 0.3), 0 0 0 8em rgba(101, 255, 120, 0);
 }
}
@keyframes ripple {
 0% {
    box-shadow: 0 0 0 0 rgba(101, 255, 120, 0.3), 0 0 0 1em rgba(101, 255, 120, 0.3), 0 0 0 3em rgba(101, 255, 120, 0.3), 0 0 0 5em rgba(101, 255, 120, 0.3);
 }
 100% {
    box-shadow: 0 0 0 1em rgba(101, 255, 120, 0.3), 0 0 0 3em rgba(101, 255, 120, 0.3), 0 0 0 5em rgba(101, 255, 120, 0.3), 0 0 0 8em rgba(101, 255, 120, 0);
 }
}

Answer 1

you can do this by using a plugin fading bubbles

this.worldMap.addPlugin('fadingBubbles', fadingBubbles);

_this = this;
    setInterval(function() {
        drawBubbles(_this);
     }, 2000); 
    drawBubbles(this);
    _drawDOT(this);
    function drawBubbles(that){
        that.worldMap.fadingBubbles(that.mapBubbles, {  });

    }