Animation does not follow the transition delay

Aetrix 0
Viewed 54

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.

https://jsfiddle.net/u7m1Ldq6/15/

 <div id = "letter">

 <h1>
 Color dissapear 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;
}
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;
}}

vs.

@keyframes hue {
100% {
  filter: hue-rotate(360deg);
 }
}

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.

[jsfiddle.net/s2187wet/6]

css html
1 Answers

It does not work because you are putting 500ms delay on whole animation. This means that animations will start 0.5 seconds after you hover over the container and nothing else.

In order to achieve what you want you have to add transition to each shadow color switch and also increase animation duration.

APART FROM ABOVE SAID

Hue is different, its not actually an animation. Just like it says that hue animation rotates over color specters, but it is done so fast that it looks like an animation.

It rotates over thousands of colors without dramatically altering the color specter family. It follows the sequence, it knows how to adequately transition from ex: green to pink, while we do not.

Your animation rotates over 10 colors with significant change in appearance, so without transition property, it will not look like each color switch has in/out delay, because colors are too few and they do not follow color family sequence.

user1LPw0
Related