title: pure CSS drawing circle animation
body: <p>I wrote a pure css drawing circle animation, but there's a little white space between the two half circles during the animation. (When the animation ends, they gone.) </p>
  
  <p>Can anyone please tell me why does this happened?</p>
  
  <p>My HTML:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.circle__box {
    width: 200px;
    height: 200px;
    margin: 50px auto;
    position: relative;
  }
  
  .circle__wrapper {
    width: 100px;
    height: 200px;
    position: absolute;
    top: 0;
    overflow: hidden;
  }
  
  .circle__wrapper--right {
    right: 0;
  }
  
  .circle__wrapper--left {
    left: 0;
  }
  
  .circle__whole {
    width: 160px;
    height: 160px;
    border: 20px solid transparent;
    border-radius: 50%;
    position: absolute;
    top: 0;
    transform: rotate(-135deg);
  }
  
  .circle__right {
    border-top: 20px solid teal;
    border-right: 20px solid teal;
    right: 0;
    animation: circleRight 5s linear forwards;
  }
  
  .circle__left {
    border-bottom: 20px solid teal;
    border-left: 20px solid teal;
    left: 0;
    animation: circleLeft 5s linear forwards;
  }
  
  @keyframes circleRight {
    0% {
      transform: rotate(-135deg);
    }
    50%,
    100% {
      transform: rotate(45deg);
    }
  }
  
  @keyframes circleLeft {
    0%,
    50% {
      transform: rotate(-135deg);
    }
    100% {
      -webkit-transform: rotate(45deg);
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="circle__box"&gt;
    &lt;div class="circle__wrapper circle__wrapper--right"&gt;
      &lt;div class="circle__whole circle__right"&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="circle__wrapper circle__wrapper--left"&gt;
      &lt;div class="circle__whole circle__left"&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>My complete code goes <a href="https://codepen.io/nicoleyyr/pen/xQrLaN?editors=0100" rel="nofollow noreferrer">here</a>. Thank you.</p>