Half or 1/4 spin and return two circles

I have never done animations in CSS, what I'm trying to get is something like cog's animations two circles spinning, one to the right and the other to the left without overlapping...
I think I got the animation(sort of) but not the drawing I think..
I have this demo: https://jsfiddle.net/Tankers/8dxh94zp/9/
the "figures" are correct and the location also correct but the animation is not.
when they spin it overlaps may be is because the object are not 100% squares?, what need to be visible is just half circles just the way that is in my demo.. HTML

<div class="wrap">
<div class="top"></div>
<div class="bott"></div>
</div>

CSS

@keyframes half_spin {
        0% {
                -ms-transform: rotate(0deg);
                -moz-transform: rotate(0deg);
                -webkit-transform: rotate(0deg);
                -o-transform: rotate(0deg);
                transform: rotate(0deg);
        }
        40% {
                -ms-transform: rotate(20deg);
                -moz-transform: rotate(20deg);
                -webkit-transform: rotate(20deg);
                -o-transform: rotate(20deg);
                transform: rotate(20deg);
        }
        60% {
                -ms-transform: rotate(0deg);
                -moz-transform: rotate(0deg);
                -webkit-transform: rotate(0deg);
                -o-transform: rotate(0deg);
                transform: rotate(0deg);
        }
        80% {
                -ms-transform: rotate(-20deg);
                -moz-transform: rotate(-20deg);
                -webkit-transform: rotate(-20deg);
                -o-transform: rotate(-20deg);
                transform: rotate(-20deg);
        }
        100% {
                -ms-transform: rotate(0deg);
                -moz-transform: rotate(0deg);
                -webkit-transform: rotate(0deg);
                -o-transform: rotate(0deg);
                transform: rotate(0deg);
        }
}

.wrap {
  display: block;
  overflow: hidden;
  position: relative
}

.top {
  width: 300px;
  height: 150px;
  border: 1px solid red;
  border-bottom-left-radius: 151px;
  border-bottom-right-radius: 151px;
  position: relative;
  animation: half_spin 5000ms ease-in-out infinite;
}
.top:before {
  position: absolute;
  width: 100%;
  height: 1px;
  background: red;
  content: " ";
  top: 0;
  left: 0;
}
.bott {
  width: 300px;
  height: 150px;
  border: 1px solid black;
  border-top-left-radius: 151px;
  border-top-right-radius: 151px;
  animation: half_spin 5000ms ease-in-out infinite reverse;
  position: relative;
}
.bott:before {
  position: absolute;
  width: 100%;
  height: 1px;
  background: black;
  content: " ";
  bottom: 0;
  left :0;
}