title: Fill a half circle animation
body: <p><a href="https://i.stack.imgur.com/ZDe9r.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZDe9r.png" alt="css animation fill half circle"></a></p>
  
  <p>I have seen this animation from Yahoo Weather app. I think it's cool and I would like to make it.</p>
  
  <p>Now I created half circle and make the sun run along the curve path using css keyframe </p>
  
  <pre><code>@-webkit-keyframes rotatekey {
  from {-webkit-transform: rotate(0deg);}
  to {-webkit-transform: rotate(360deg);}
  }
  
  .rotate {
  -webkit-animation-name: rotatekey; 
  -webkit-animation-duration: 7s; 
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  }
  </code></pre>
  
  <p>but I want to know how to make the yellow area <strong>fill the half circle using css</strong> and javascript? outside half circle is transparent area.</p>