SOURCE

<div class="taiji">
  <div class="lightside">
    <div class="lightcircle">
      <div class="smalldarkcircle">
      </div>
    </div>
    <div class="darkcircle">
      <div class="smalllightcircle">
      </div>
    </div>
  </div>
</div>

.taiji
{
  background-color:white;
  width:200px;
  height:200px;
  border-radius:100px;
  border:1px solid;
  animation:am 10s;
  animation-iteration-count:infinite;
  animation-timing-function:linear;
}

.lightside
{
  position:absolute;
  background-color:black;
  border-radius:100px 0px 0px 100px;
}
.lightcircle
{
  width:100px;
  height:100px;
  position:relative;
  background-color:white;
  left:50px;
  border-radius:50px;
}
.darkcircle
{
  width:100px;
  height:100px;
  position:relative;
  background-color:black;
  left:50px;
  border-radius:50px;
}
.smalldarkcircle
{
  position:relative;
  left:35px;
  top:35px;
  width:30px;
  height:30px;
  border-radius:25px;
  background-color:black;
}
.smalllightcircle
{
  position:relative;
  left:35px;
  top:35px;
  width:30px;
  height:30px;
  border-radius:25px;
  background-color:white;
}
@keyframes am
{
  0%{transform:rotate(0deg)}
  100%{transform:rotate(360deg)}
}