title: Drawing animated arc with pure CSS
body: <p>I know it is possible to draw and animate arcs in SVG and canvas. However, is it possible in CSS?</p>
  <p>I have created an arc using the following method:</p>
  <pre><code>.arc{
      width:150px;
      height:400px;
      border-radius:50%;
      border-right:1px solid black;
      border-left:1px solid black;
      border-top:1px solid black;
      border-bottom:1px solid white;
  }
  </code></pre>
  <p>But, how can I animate this? The only way I can think of is having a pure white div over it and sliding that div to the right gradually revealing the arc. Is there a better way?</p>