Play focus animation in reverse when focus removed - html

Question

I am a tad stumped on this following CSS shenannigan.
I have a text input element and its background is red, and I want to animate a whitewash effect when it becomes focused, and the reverse red-wash effect when it is unfocused.
#keyframes reveal-search {
0% {
background: maroon;
}
20% {
background: linear-gradient(to left, maroon 0%, whitesmoke 40%, whitesmoke 60%, maroon 100%);
}
40% {
background: linear-gradient(to left, maroon 0%, white 30%, whitesmoke 70%, maroon 100%);
}
60% {
background: linear-gradient(to left, maroon 0%, whitesmoke 20%, whitesmoke 80%, maroon 100%);
}
80% {
background: linear-gradient(to left, maroon 0%, whitesmoke 10%, whitesmoke 90%, maroon 100%);
}
100% {
background: whitesmoke;
}
}
input {
border: none;
background: maroon;
}
input:focus {
outline: none;
background: whitesmoke;
animation: reveal-search 0.1s both;
}
<input type="text" />
I have tried playing around with moving animation outside of &:focus, setting setting a separate animation property with backwards in the input, and removing the background colors as I thought they were colliding with the animation.
As it stands, the when this input is focused the is a nice white reveal animation happening from the center. But when it is unfocused, it just goes back to red. I would like the animation to play in reverse, instead.

Answer 1

You don't need JS for this.
You can run the same animation in reverse for the input when it is not in focus.
However, there's a slight hitch as once an animation has been run CSS doesn't run it again - so using the same animation-name it just thinks it's done it.
This snippet copies the animation keyframes reveal but calls it unreveal and gets it run in reverse when the input is not in focus:
#keyframes reveal-search {
0% {
background: maroon;
}
20% {
background: linear-gradient(to left, maroon 0%, whitesmoke 40%, whitesmoke 60%, maroon 100%);
}
40% {
background: linear-gradient(to left, maroon 0%, white 30%, whitesmoke 70%, maroon 100%);
}
60% {
background: linear-gradient(to left, maroon 0%, whitesmoke 20%, whitesmoke 80%, maroon 100%);
}
80% {
background: linear-gradient(to left, maroon 0%, whitesmoke 10%, whitesmoke 90%, maroon 100%);
}
100% {
background: whitesmoke;
}
}
#keyframes unreveal-search {
0% {
background: maroon;
}
20% {
background: linear-gradient(to left, maroon 0%, whitesmoke 40%, whitesmoke 60%, maroon 100%);
}
40% {
background: linear-gradient(to left, maroon 0%, white 30%, whitesmoke 70%, maroon 100%);
}
60% {
background: linear-gradient(to left, maroon 0%, whitesmoke 20%, whitesmoke 80%, maroon 100%);
}
80% {
background: linear-gradient(to left, maroon 0%, whitesmoke 10%, whitesmoke 90%, maroon 100%);
}
100% {
background: whitesmoke;
}
}
input {
border: none;
background: maroon;
animation: unreveal-search 0.1s both;
animation-direction: reverse;
animation-fill-mode: forwards;
}
input:focus {
outline: none;
background: whitesmoke;
animation: reveal-search 0.1s both;
}
<input type="text" />