如何在datamaps angular 8中的气泡上添加动画效果？

我希望使用angular 8中的数据贴图在svg贴图中的气泡上添加动画效果。气泡显示正确，但动画不起作用。这就是我迄今为止所尝试的

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

---

您可以使用插件来实现这一点

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

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

    } 

---

您可以使用插件来实现这一点

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

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

    } 

---

如果这是你尝试过的，我认为在这里提到角度没有任何意义。这只是css。我也尝试过使用angular。但是没有用，所以我只尝试在css中使用。我提到angular是因为我在angular 8中使用的数据映射是不相关的，它不是angular的一部分。我假设您在这里使用Check：本质上，只需以编程方式将ripple effects的css类添加到bubble中即可。是的，我正在使用此代码和下面的github代码。如果这是您尝试过的代码，我认为在这里提到它毫无意义。这只是css。我也尝试过使用angular。但是没有用，所以我只尝试在css中使用。我提到angular是因为我在angular 8中使用的数据映射是不相关的，它不是angular的一部分。我假设您在这里使用Check：本质上，只需以编程方式将ripple effects的css类添加到bubble中即可