title: Animation does not follow the transition delay
body: <p>Why doesn't the first animation follow a delay when you hover-in and out? It just animates/dissapear instantly. I'm trying to achieve the delay when you hover in and out similar to the hue-rotate.</p>
  <p><a href="https://jsfiddle.net/u7m1Ldq6/15/" rel="nofollow noreferrer">https://jsfiddle.net/u7m1Ldq6/15/</a></p>
  <pre><code> &lt;div id = &quot;letter&quot;&gt;
  
   &lt;h1&gt;
   Color dissapear instantly when hovered in and out
   &lt;/h1&gt;  
  
   &lt;/div&gt;
  
  &lt;div id = &quot;good&quot;&gt;
  
     &lt;h1&gt;
        There is a delay when hovered in and out
     &lt;/h1&gt;
  
   &lt;/div&gt;
  
  
  @keyframes glow {
  0% {
      box-shadow: 0 0 15px azure, 0 0 25px azure;
  }
  10% {
      box-shadow: 0 0 15px pink, 0 0 25px pink;
  }
  20% {
      box-shadow: 0 0 15px lightgoldenrodyellow, 0 0 25px lightgoldenrodyellow;
  }
  30% {
      box-shadow: 0 0 15px yellow, 0 0 25px yellow;
  }
  40% {
      box-shadow: 0 0 15px lime, 0 0 25px lime;
  }
  50% {
      box-shadow: 0 0 15px aqua, 0 0 25px aqua;
  }
  60% {
      box-shadow: 0 0 15px pink, 0 0 25px pink;
  }
  70% {
      box-shadow: 0 0 15px lightgoldenrodyellow, 0 0 25px lightgoldenrodyellow;
  }
  80% {
      box-shadow: 0 0 15px yellow, 0 0 25px yellow;
  }
  90% {
      box-shadow: 0 0 15px lime, 0 0 25px lime;
  }
  100% {
      box-shadow: 0 0 15px aqua, 0 0 25px aqua;
  }}
  </code></pre>
  <p>vs.</p>
  <pre><code>@keyframes hue {
  100% {
    filter: hue-rotate(360deg);
   }
  }
  </code></pre>
  <p>I tried recreating the js fiddle. What I want to achieve is a delay. When you hover in the div there should be a delay before it animates then when you hover out the color should fade out and not dissapear instantly.</p>
  <p>[jsfiddle.net/s2187wet/6]</p>