title: Drawing border colors during a CSS transition
body: <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>button {
    background: none;
    border: 0;
    box-sizing: border-box;
    margin: 1em;
    padding: 1em 2em;
    box-shadow: inset 0 0 0 2px #f45e61;
    color: #f45e61;
    font-size: inherit;
    font-weight: 700;
    position: relative;
    vertical-align: middle;
  }
  button::before, button::after {
    box-sizing: inherit;
    content: " ";
    position: absolute;
    width: 100%;
    height: 100%;
  }
  .draw {
    transition: color 0.25s;
  }
  .draw::before, .draw::after {
    border: 2px solid transparent;
    width: 0;
    height: 0;
    transition: width 1.25s ease-out 1.25s, height 1.25s ease-out 1.25s;
  
  }
  .draw::before {
    top: 0;
    left: 0;
  }
  .draw::after {
    bottom: 0;
    right: 0;
  }
  .draw:hover {
    color: #60daaa;
  }
  .draw:hover::before, .draw:hover::after {
    width: 100%;
    height: 100%;
  }
  .draw:hover::before {
    border-top-color: #60daaa;
    border-right-color: #60daaa;
    transition: width 0.25s ease-out, height 0.25s ease-out 0.25s;
  }
  .draw:hover::after {
    border-bottom-color: #60daaa;
    border-left-color: #60daaa;
    transition: border-color 0s ease-out 0.5s, width 0.25s ease-out 0.5s, height 0.25s ease-out 0.75s;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;section class="buttons"&gt;
    &lt;button class="draw"&gt;Draw&lt;/button&gt;
  &lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I have a working pen ( <a href="https://codepen.io/anon/pen/vdgdxO" rel="nofollow noreferrer">https://codepen.io/anon/pen/vdgdxO</a> ) that changes the border color of an element while hovering ( top right bottom left ) with some transition to smoothen it up.</p>
  
  <p>I would like to be able to "reverse" the border color change after a few seconds. Basically, I'd like to change border color when the opposite one is changing color :</p>
  
  <ul>
  <li>border-top change color</li>
  <li>border-right change color</li>
  <li>border-bottom change color &amp; border-top goes back to its original color</li>
  <li>border-left change color &amp; border-right goes back to its original color</li>
  <li>border-top change color &amp; border-bottom goes back to its original color</li>
  <li>border-right change color &amp; border-left goes back to its original color
  etc.</li>
  </ul>
  
  <p>Right now I only have the color change worked out, but I don't know how to "reverse" it. I'd also like this transition to loop forever, but I'm clueless on where to start. Any suggestions?</p>