Fill the animation with a semicircle

Question

I saw this animation from the Yahoo Weather app. I think this is cool, and I would like to do it.

Now I have created a half circle and make the sun move along the curve using the css keyframe

@-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;
}

but I want to know how to make the yellow area fill half the circle with css and javascript? outside a semicircle is a transparent region.

Answer 1

, . "" :

.wrapper {
  border-top-left-radius: 500px;
  border-top-right-radius: 500px;
  width: 500px; height: 250px;
  overflow: hidden;
  border: 3px dashed gold;
  border-bottom: none;
}
.wrapper:after {
  content: '';
  display: block;
  width: 100px; height: 100%;
  background: gold;
  -webkit-animation: fill 7s linear infinite;
  animation: fill 7s linear infinite;
}
@-webkit-keyframes fill {
  from { width: 0; }
  to { width: 100%; }
}
@keyframes fill {
  from { width: 0; }
  to { width: 100%; }
}

<div class="wrapper"></div>

Hide result

Answer 2

:

<div class="wrapper">
  <div class="semicircle">
    <div class="fill"></div>
  </div>
</div>

.wrapper {
  margin: 1rem;
  width: 400px;
  height: 200px;
  overflow: hidden;
  border-bottom: 2px solid #AAA;
}
.wrapper .semicircle {
  border: 2px solid #AAA;
  width: 400px;
  height: 400px;
  border-radius: 200px;
  box-sizing: border-box;
  overflow: hidden;
}
.wrapper .semicircle .fill {
  background: rgba(200, 192, 32, 0.5);
  width: 0%;
  height: 200px;
  transition: width 1s ease-in-out;
}
.wrapper .semicircle:hover .fill {
  width: 100%;
}

demo: http://cssdeck.com/labs/pbnpqheh

Answer 3

Here's an alternative in which the yellow color rotates instead of filling to the side:

HTML (hooray for pseudo-elements!):

<div id="horizon"></div>

CSS

#horizon:before {
   content: "";
    position: absolute;
    width: 400px;
    height: 400px;
    background: transparent;
    border:5px dashed #eee;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
}

#horizon{
    width:410px;
    height:200px;
    position:relative;
    overflow:hidden;
}

#horizon:after {
   content: "";
    position: absolute;
    width: 400px;
    height: 200px;
    top:5px;
    left:5px;
    background: yellow;
    -moz-border-radius: 400px 400px 0 0;
    -webkit-border-radius: 400px 400px 0 0;
    border-radius: 400px 400px 0 0;
    -webkit-transform-origin: bottom;
    -moz-transform-origin: bottom;
    transform-origin: bottom;
    -webkit-animation-name: rotate; 
    -webkit-animation-duration: 5s; 
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: rotate; 
    -moz-animation-duration: 5s; 
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
}
@-moz-keyframes rotate {
    from {-moz-transform:rotateZ(180deg);}
    to {-moz-transform:rotateZ(360deg)}
}

@-webkit-keyframes rotate {
    from {-webkit-transform:rotateZ(180deg);}
    to {-webkit-transform:rotateZ(360deg)}
}

Fiddle: http://jsfiddle.net/Mp4sZ/