How come the first animation doesn't have a delay when hovering in and out? It just disappears instantly. I'm attempting to achieve a delay similar to the hue-rotate effect when hovering in and out.
https://jsfiddle.net/u7m1Ldq6/15/
<div id="letter">
<h1>Color disappears instantly when hovered in and out</h1>
</div>
<div id="good">
<h1>There is a delay when hovered in and out</h1>
</div>
@keyframes glow {
0% {
box-shadow: 0 0 15px azure, 0 0 25px azure;
}
10% {
box-shadow: 0 0 15px pink, 0 0 25px pink;
}
...
</code></pre>
<p>vs.</p>
<pre><code>
@keyframes hue {
100% {
filter: hue-rotate(360deg);
}
}
I attempted to recreate the JavaScript fiddle. My goal is to introduce a delay. When the div is hovered over, I want there to be a delay before the animation starts, and when the hover is removed, the color should fade out instead of disappearing instantly.
[jsfiddle.net/s2187wet/6]