title: Reset CSS animation when not hovering
body: <p>I would like to reset my animation when hover out from div. This code is from Codepen.io and edited for my purpose.I want border animation to reset when i hover out form div. now it stays fully animated. I'm beginner with coding i am learning by trial and error.</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>@keyframes bg {
      0%   { background-size:    0 5px, 5px 0, 0 5px, 5px 0; }
      25%  { background-size:    100% 5px, 5px 0, 0 5px, 5px 0; }
      50%  { background-size:    100% 5px, 5px 100%, 0 5px, 5px 0; }
      75%  { background-size:    100% 5px, 5px 100%, 100% 5px, 5px 0; }
      100% { background-size:    100% 5px, 5px 100%, 100% 5px, 5px 100%; }
  }
  
  .box   {
      width: 100%;
      margin: 2rem auto;
      padding: 2em;
      color: white;
      
      background-repeat: no-repeat;
      background-image:   linear-gradient(to right, #3d3d3d 100%, #3d3d3d 100%),
                          linear-gradient(to bottom, #3d3d3d 100%, #3d3d3d 100%),
                          linear-gradient(to right, #3d3d3d 100%, #3d3d3d 100%),
                          linear-gradient(to bottom, #3d3d3d 100%, #3d3d3d 100%);
      background-size:    100% 5px, 5px 100%, 100% 5px, 5px 100%;
      background-position:    0 0, 100% 0, 100% 100%, 0 100%;
      
      animation: bg 1.25s cubic-bezier(0.19, 1, 0.22, 1) 1;
      animation-play-state: paused;
      animation-iteration-count: 1;
      animation-timing-function: ease-in-out;        
  }
  
  .box:hover h1{
      animation-play-state: running;
      animation-duration: 1s;
      animation-iteration-count: 1;
      animation-timing-function: ease-in-out;
      color: #a1a1a1;
  }
  
  .box:hover p{
      animation-play-state: running;
      animation-duration: 1s;
      animation-iteration-count: 1;
      animation-timing-function: ease-in-out;
      color: #a1a1a1;
  }
      
  .box h1 {
      font-family: Raleway;
      color: white;
      font-weight: bold;
  }
  
  .box p {
      font-family: inter;     
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;a href="http://local.local"&gt;
    &lt;div class="box"&gt;
      &lt;h1&gt;Zdravotnictví&lt;/h1&gt;          
        &lt;p&gt;Díky newsletteru Zdravotnictví vám neunikne žádná zpráva z oboru Zdravotního průmyslu, kterým tečou stovky miliard. Vychází každé úterý.&lt;/p&gt;
    &lt;/div&gt;
  &lt;/a&gt;</code></pre>
  </div>
  </div>
  </p>