title: add pulse animation effect to map marker angular agm
body: <p>I want to add this pulse animation to my markers in angular. I am using <a href="https://angular-maps.com/api-docs/agm-core/directives/agmmarker" rel="nofollow noreferrer">agm</a> library to add google maps to my project. how can I use css to add this <a href="https://www.pinterest.com/pin/108438303504562416/?lp=true" rel="nofollow noreferrer">pulse animation</a> to my markers?
  here is what I have tried until now:</p>
  
  <pre><code>&lt;agm-map (mapReady)="mapReading()" [latitude]="lat" [longitude]="lng" [zoom]="zoom" [styles]="customTheme"&gt;
    &lt;span class="pulse" *ngFor="let marker of markers"&gt;
      &lt;agm-marker  [animation]="userLocationMarkerAnimation" [latitude]="marker.lat"
        [longitude]="marker.long" [iconUrl]="marker.icon"&gt;
      &lt;/agm-marker&gt;
    &lt;/span&gt;
  &lt;/agm-map&gt;
  </code></pre>
  
  <p>here is my css:</p>
  
  <pre><code>.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);
    }
  }
  </code></pre>