title: Border animation Keyframes/CSS Animation
body: <p>I have an animation that I want to achieve and I am not able to be getting it right.
  I've searched the internet and found some solutions, however they have a slight change in the animation. </p>
  
  <p>I want a border animation that starts at the bottom left goes to top left then top right then bottom right and finally back to bottom left. Each animation after another and the borders once appeared should stay visible afterwards. </p>
  
  <p>This is the code I've managed to get: <a href="https://jsfiddle.net/gwbn427m/" rel="nofollow noreferrer">https://jsfiddle.net/gwbn427m/</a></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>div {
    width: 300px; 
    height: 200px;
    display: inline-block;
    padding: 30px;
    /*bottom: -25;*/
    position: relative;
    border: 0;
  }
  
  .draw {
    transition: color 0.25s;
  }
  
  .draw::before,
  .draw::after {
    /* Set border to invisible, so we don't see a 4px border on a 0x0 element before the transition starts*/
    border: 2px solid transparent;
    width: 0;
    height: 0;
    box-sizing: inherit;
    content: '';
    position: absolute;
  }
  
  /* This covers the top &amp; right borders (expands right, then down)*/
  .draw::before {
    left: 0;
    bottom: 0;
  }
  
  /* And this the bottom &amp; left borders (expands left, then up) */
  .draw::after {
    right: 0;
    top: 0;
  }
  
  .draw:hover {
    color: red;
  }
  
  /* Hover styles */
  .draw:hover::before,
  .draw:hover::after {
    width: 100%;
    height: 100%;
  }
  
  .draw:hover::before {
    border-top-color: res; /*Make borders visible */
    border-right-color: red;
    transition:
    width 0.25s ease-out 0.25s,  /* And then height */
    height 0.25s ease-out; /* Width expands first */
  }
  
  .draw:hover::after {
    border-bottom-color: red; /* Make borders visible */
    border-left-color: red;
    transition:
    border-color 0s ease-out 0.5s, /* Wait for ::before to finish before showing border*/   
    width 0.25s ease-out 0.75s, /* And finally height*/
    height 0.25s ease-out 0.5s; /*And then exanding width*/
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="draw"&gt;
    &lt;a href="https://placeholder.com"&gt;&lt;img src="http://via.placeholder.com/200x100"&gt;&lt;/a&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>However I've tried it with those <a href="https://codepen.io/sean_codes/pen/YZWqLo" rel="nofollow noreferrer">https://codepen.io/sean_codes/pen/YZWqLo</a> keyframe animation and couldn't get it right either.</p>
  
  <p>I really would appreciate any help!</p>