Animation does not follow the transition delay

Issue

This Content is from Stack Overflow. Question asked by Mark Jerome Santos

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/

@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);
 }
}

What’s wrong?



Solution

This question is not yet answered, be the first one who answer using the comment. Later the confirmed answer will be published as the solution.

This Question and Answer are collected from stackoverflow and tested by JTuto community, is licensed under the terms of CC BY-SA 2.5. - CC BY-SA 3.0. - CC BY-SA 4.0.

people found this article helpful. What about you?