add pulse animation effect to map marker angular agm

I want to add this pulse animation to my markers in angular. I am using agm library to add google maps to my project. how can I use css to add this pulse animation to my markers? here is what I have tried until now:

<agm-map (mapReady)="mapReading()" [latitude]="lat" [longitude]="lng" [zoom]="zoom" [styles]="customTheme">
  <span class="pulse" *ngFor="let marker of markers">
    <agm-marker  [animation]="userLocationMarkerAnimation" [latitude]="marker.lat"
      [longitude]="marker.long" [iconUrl]="marker.icon">
    </agm-marker>
  </span>
</agm-map>

here is my css:

.pulse {
  width: 150px;
  height: 150px;
  background: rgb(255, 0, 64);
  border-radius: 50%;
  color: #fff;
  font-size: 20px;
  text-align: center;
  line-height: 150px;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  animation: animate 2s linear infinite;
}

@keyframes animate {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 0, 64, 0.7), 0 0 0 0 rgba(255, 0, 64, 0.7);
  }

  40% {
    box-shadow: 0 0 0 50px rgba(255, 0, 64, 0), 0 0 0 0 rgba(255, 0, 64, 0.7);
  }

  80% {
    box-shadow: 0 0 0 50px rgba(255, 0, 64, 0), 0 0 0 30px rgba(255, 0, 64, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(255, 0, 64, 0), 0 0 0 30px rgba(255, 0, 64, 0);
  }
}

from add pulse animation effect to map marker angular agm