CSS after mouse is moved from hover - html

Question

In CSS, the hover event is triggering as it should. However, when it is an animation, when the mouse is moved back off the object (in this case a button), it returns to its normal state without an animation back. This results in it looking really jumping and going against the theme I'm shooting for. So, I need an event that is triggered after the hover event, like what I thought would work: .button-default:hover:after {}, but didn't work the way I expected. My CSS below:
.button-default {
width: 40vw;
height: 5vh;
color: white;
background: transparent;
border: solid 2px;
border-radius: 5px;
border-color: white;
}
.button-default:hover {
animation-name: animate-button;
animation-duration: 2s;
animation-fill-mode: forwards;
}
.button-default:hover:after {
animation-name: normalize-button;
animation-duration: 2s;
animation-fill-mode: forwards;
}
#keyframes normalize-button {
from {
color: blue;
background: white;
border-color: blue;
}
to {
width: 40vw;
height: 5vh;
color: white;
background: transparent;
border: solid 2px;
border-radius: 5px;
border-color: white;
}
}
#keyframes animate-button {
from {
.button-default;
}
to {
color: blue;
background: white;
border-color: blue;
}
}
body {
font-family: 'Oswald', sans-serif;
/*background: url('../images/novam.png') no-repeat center;*/
background: black;
background-size: cover;
}

Answer 1

As your animation only need two stages, you can just use css transition instead of animation to get that effect. And FYI, after is pseudo element. It is not event.
.button-default {
width: 40vw;
height: 5vh;
color: white;
background: transparent;
border: solid 2px;
border-radius: 5px;
border-color: white;
-webkit-transition: all 2s ease;
transition: all 2s ease;
-moz-transition: all 2s ease;
}
.button-default:hover {
color: blue;
background: white;
border-color: blue;
}
Fiddle here