title: Css Button Animation Issue
body: <p>I have a toggle like this:</p>
  <p><a href="https://i.stack.imgur.com/T6KZq.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/T6KZq.png" alt="enter image description here" /></a></p>
  <p>If I click this it will be going like left to right and it goes left but I want left to right no-repeat</p>
  <p>Here's my code:</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>.main-toggle {
    border-radius: 30px;
    width: 200px;
    height: 50px;
    border: none;
    background-color: grey;
  }
  
  .sub-toggle {
    position: absolute;
    left: 15px;
    border-radius: 30px;
    width: 50px;
    height: 40px;
    border: none;
    top: 13px;
    background-color: black;
  }
  
  .sub-toggle:focus {
    -webkit-animation-name: run;
    -webkit-animation-duration: 1s;
  }
  
  @keyframes run {
    50% {
      left: 20%;
    }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;button class="main-toggle"&gt;
    &lt;button class="sub-toggle"&gt;&lt;/button&gt;
  &lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>