SOURCE

setTimeout(function(){
  $("#my").removeClass("active-point").addClass("inactive-point")
},1000);
setTimeout(function(){
  $("#my").removeClass("inactive-point").addClass("active-point")
},2000);

<div class="container">
  <div id ="my" class="active-point"></div>
  <hr>
  <div class="inactive-point"></div>
  <hr>
</div>

在angular中使用class绑定，代码如下：
<div [class]="class1"></div>
<div [class]="class2"></div>
<div [class]="class3"></div>
...

 .container {
   position: absolute;
   top: 10%;
   left: 30%;
   width: 40%;
   height: 40%;
   display: flex;
 }
 /************以下为具体实现************/
 .active-point, .inactive-point {
   height: 24px;
   width: 24px;
   border-radius: 50%;
 }
 
 .active-point {
   animation: scale-ani 1s;
   background: #1890ff;
   box-shadow: 0 0 5px 0px #1890ff;
 }
 
 .inactive-point {
   animation: scale-ani-copy 1s;
   background: #bfbfbf;
   box-shadow: 0 0 5px 0px #bfbfbf;
 }
 
 @keyframes scale-ani {
   0% {
     transform: scale(0);
   }
   50% {
     transform: scale(1.5);
   }
   100% {
     transform: scale(1);
   }
 }
 @keyframes scale-ani-copy {
   0% {
     transform: scale(0);
   }
   50% {
     transform: scale(1.5);
   }
   100% {
     transform: scale(1);
   }
 }