css animation

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    
    body { 
    background: #000;
    }
    
    h3 { 
    color: #81d4b9;
    }
    
    
    #lights {
     width:800px
    }
    
    .bulb {
      width: 50px;
      height: 50px;
      display: inline-block;
      float: left;
      margin: 15px 10px;
      border-radius: 50% 2px;
      transform: rotate(-45deg);
    }
    
    
    .bulb:nth-child(odd) {
      background: #6CB6FF;
      opacity: 1;
      box-shadow: 1px 1px 15px #6CB6FF, -1px -1px 15px #6CB6FF;
      animation: bulb-pulse-1 0.9s linear 0s infinite alternate;
    }
    
    .bulb:nth-child(even) {
      background: #ffa319;
      opacity: 1;
      box-shadow: 1px 1px 15px #ffa319, -1px -1px 15px #ffa319;
      animation: bulb-pulse-2 0.9s linear 0s infinite alternate;
    }
    
    @keyframes bulb-pulse-1 {
      from {box-shadow: 1px 1px 15px #6CB6FF, -1px -1px 15px #6CB6FF; }
      to { box-shadow: none; opacity: .3;}
    }
    
    @keyframes bulb-pulse-2 {
      from { box-shadow: none; opacity: .3;}
      to {box-shadow: 1px 1px 15px #ffa319, -1px -1px 15px #ffa319; }
    }
    
    
  </style>
</head>

<body>
  <h3>CSS Animation</h3>
  <h3>click to remove</h3>
  <div id ="lights" style="text-align:center;">
    <div class="bulb"></div>
    <div class="bulb"></div>
  </div>
  
  
  <script>
    for(var i=0; i < 75; i++){
      var bulb = document.createElement("div");
      bulb.className = "bulb";
      document.getElementById("lights").appendChild(bulb);
    }
    
     
   d3.selectAll(".bulb").on("click", 
                        function(d) {
            d3.select(this)
            .transition()
            .duration(2500)
            .style("opacity", 0)
            .style("background",  "#000")
            //.style("box-shadow", "none")
            .style("animation", "none")
            ;
   }
                           ); 
    
  </script>
  
  
</body>

https://d3js.org/d3.v4.min.js