Half or 1/4 spin and return two circles-CodePudding

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 >
<div ></div>
<div ></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;
}

CodePudding user response：

If I understand your question correctly, this code snippet is what you're looking for. I added a transform-origin property to both the top and bottom half-circles to specify the point that we're rotating around.

Both divs should rotate around the midpoint of their flat edge, for the top that is transform-origin: 50% 0%; and for the bottom it is transform-origin: 50% 100%;

@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;
  transform-origin: 50% 0%;
}
.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;
  position: relative;
  transform-origin: 50% 100%;
}
.bott:before {
  position: absolute;
  width: 100%;
  height: 1px;
  background: black;
  content: " ";
  bottom: 0;
  left :0;
}

<div >
<div >

</div>
<div >

</div>

</div>

CodePudding user response：

Use transform-origin

[https://jsfiddle.net/3batp2qg/][1]

Best wishes