title: Google Maps Circle object custom css
body: <p>I'm using Google Maps Javascript API v3 <code>Circle</code> object to draw circles on the map.
  I want to customize the css of that circle, by adding some css animations.</p>
  
  <p>I know that I can use a custom overlays, but I like the Circle class because I can easy set a radius and the circle scales automatically.</p>
  
  <p>I just want to edit some css properties of the circle, but looking at the docs there is nothing.</p>
  
  <p>How can i do that?</p>
  
  <p>This is the Circle code that i use currently:</p>
  
  <pre><code>var latLng = {
     lat: 0,
     lng: 0
  };      
  var radius = 200; //200 meters
  var fillColor = "#40ad00";
  var strokeColor = "#40ad00";
  
  var circle = new google.maps.Circle({
     center: latLng,
     radius: radius,
     strokeColor: strokeColor,
     strokeOpacity: 0.25,
     strokeWeight: 1,
     fillColor: fillColor,
     fillOpacity: 0.1,
     map: map
  });
  </code></pre>
  
  <p>What i want to do is to have this animated circle on the map.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    background: #000000;
  }
  
  div.circle {
    position: absolute;
    top: 10px;
    left: 50px;
    width: 200px;
    height: 200px;
    overflow: hidden;
    border: 2px solid;
    border-radius: 100%;
    box-sizing: border-box;
    animation: spin 5s infinite cubic-bezier(0.075, 0.80, 0.135, 1);
  }
  
  @keyframes spin {
      0% {
        opacity:0;
        -webkit-transform: scale(0.25);
        border-color: #FFFFFF;
        box-shadow: 0px 0px 0px 1px #FFFFFF;
        }
      15% {
        opacity:1;
        }
      70% {
        opacity:1;
        border-color: #d100ff;
        box-shadow: 0px 0px 50px 1px #d100ff;
        }
      100% {
        opacity:0;
        -webkit-transform: scale(1);
        box-shadow: 0px 0px 50px 1px #FFFFFF;
        }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="circle"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>