title: CSS ONLY Animate Draw Circle with border-radius and transparent background
body: <p>I am trying to draw a circle with border-radius, and animate it. I can do this, but what i can't do is overlay elements and set the circles background to transparent, without unhiding the mask. I am not able to make it transparent over elements because the mask needs to be applied to hide the left half of the circle as it rotates to mimic the draw effect.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="background"&gt;
      &lt;div class="wrapper"&gt;
          &lt;div class="pie spinner"&gt;&lt;/div&gt;
          &lt;div class="pie filler"&gt;&lt;/div&gt;
          &lt;div class="mask"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.background{
      background:green;
      z-index: 1000;
  }
  .wrapper {
    width: 250px;
    height: 250px;
    position: relative;
    margin: 40px auto;
    background: rgba(0,0,255,1);
  
  }
  
  .wrapper, .wrapper * {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
  .wrapper .pie {
    width: 50%;
    height: 100%;
    transform-origin: 100% 50%;
    position: absolute;
    background: transparent;
    border: 5px solid rgba(0,0,0,0.9);
  }
  
  .wrapper .spinner {
    border-radius: 100% 0 0 100% / 50% 0 0 50%;
    z-index: 0;
    border-right: none;
    -webkit-animation: rota 5s linear infinite;
  }
  
  .wrapper:hover .spinner,
  .wrapper:hover .filler,
  .wrapper:hover .mask {
    animation-play-state: running;
  }
  
  .wrapper .filler {
    border-radius: 0 100% 100% 0 / 0 50% 50% 0;
    left: 50%;
    opacity: 0;
    -webkit-animation: opa 5s steps(1, end) infinite reverse;
    border-left: none;
  }
  
  .wrapper .mask {
    width: 50%;
    height: 100%;
    position: absolute;
    background: inherit;
    opacity: 1;
    -webkit-animation: opa 5s steps(1, end) infinite;
  }
  
  @-webkit-keyframes rota {
    0% {transform: rotate(0deg);border-color:red;}
    100% {transform: rotate(360deg);z-index:0;}
  }
  @-webkit-keyframes opa {
    0% {opacity: 1;}
    50%, 100% {opacity: 0;}
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/BuzzSmarter/gmvban4p/">http://jsfiddle.net/BuzzSmarter/gmvban4p/</a></p>
  
  <p>In my example, I need to change the blue background to transparent, without unhiding the border-radius before it starts rotating.</p>
  
  <p>Excuse the colors, these are not what I will be working with, but provide a clearer approach to the issue. </p>
  
  <p>This is my temporary product where I have to remove the draw to accomplish the transparency.
  <a href="http://jsfiddle.net/BuzzSmarter/gmvban4p/">http://jsfiddle.net/BuzzSmarter/gmvban4p/</a></p>