title: Animate a border with CSS
body: <p>I want to recreate a CSS animation in my computer (local) but it's not working, when I try the code in Codepen it's working, what am I doing wrong?</p>
  
  <p>Here is the code: <a href="https://codepen.io/jvera/pen/gXxgXx" rel="nofollow noreferrer">https://codepen.io/jvera/pen/gXxgXx</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>{
    background: none;
    border: 0;
    box-sizing: border-box;
    box-shadow: inset 0 0 0 2px #f45e61;
    color: #f45e61;
    font-size: inherit;
    font-weight: 700;
    margin: 1em;
    padding: 1em 2em;
    text-align: center;
    text-transform: capitalize;
    vertical-align: middle;
  }
  .draw {
    overflow: hidden;
    position: relative;
  }
  .draw::before, .draw::after {
    content: '';
    box-sizing: border-box;
    position: absolute;
    border: 2px solid transparent;
    width: 0;
    height: 0;
  }
  .draw::before {
    top: 0;
    left: 0;
    border-top-color: #60daaa;
    border-right-color: #60daaa;
    animation: border 2s infinite;
  }
  .draw::after {
    bottom: 0;
    right: 0;
    animation: border 2s 1s infinite, borderColor 2s 1s infinite;
  }
  
  @keyframes border {
    0% {
      width: 0;
      height: 0;
    }
    25% {
      width: 100%;
      height: 0;
    }
    50% {
      width: 100%;
      height: 100%;
    }
    100% {
      width: 100%;
      height: 100%;
    }
  }
  @keyframes borderColor {
    0% {
      border-bottom-color: #60daaa;
      border-left-color: #60daaa;
    }
    50% {
      border-bottom-color: #60daaa;
      border-left-color: #60daaa;
    }
    51% {
      border-bottom-color: transparent;
      border-left-color: transparent;
    }
    100% {
      border-bottom-color: transparent;
      border-left-color: transparent;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;center&gt;&lt;h2 class="draw"&gt;Titulo&lt;/h2&gt;&lt;center&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I created the two files and put them into the folder, when I run the HTML file I can't see the animation effect (like the demo) so, what can I do? why I'm not seeing the results?</p>
  
  <p>Thanks.</p>