Continue Transition from where Animation Ended - css

Question

See the following button animation:
html {
background: white;
font-family: Arial;
}
.button {
position: relative;
display: inline-block;
color: #000;
border: 2px solid #000;
padding: 10px 24px;
font-size: 20px;
font-weight: 600;
text-align: center;
text-decoration: none;
transition-property: color, background, border-color;
transition-duration: 0.3s;
}
.button:hover {
color: #fff;
}
.button:hover ._background:after {
transform: translateX(0);
animation: fill-horizontal 0.3s linear 0s 1;
}
.button ._background {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: -1;
overflow: hidden;
}
.button ._background:after {
content: "";
position: absolute;
display: block;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: #000;
transform: translateX(100%);
transition: transform .3s;
}
#keyframes fill-horizontal {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0);
}
}
<a class="button" href="javascript:">
<div class="_background"></div>
Button
</a>
The intended animation is to sweep the ._background:after element in from the left, and then out to the right like so:
translateX(-100%)
translateX(0) - Hover
translateX(100%) - Remove Hover
Whilst the animation works as intended when the user hovers for the duration of the CSS animation (.3s), it looks terrible if the user 'unhovers' before the CSS animation completes.
I would like the transition to translateX(100%) to continue from where the animation finished. Is this even possible?
NOTE - I am aware that the div._background element is not necessary, this has additional functionality that is not relevant to this question.

Answer 1

You can consider the same effect differently in order to avoid this bad effect:
Here is an idea using background animation where the trick is to change the position only after the size has changed.
.button {
position: relative;
display: inline-block;
color: #000;
border: 2px solid #000;
padding: 10px 24px;
font-size: 20px;
font-weight: 600;
text-align: center;
text-decoration: none;
background-image:linear-gradient(#000,#000);
background-size:0% 100%;
background-position:left;
background-repeat:no-repeat;
background-origin:border-box;
transition:color 0.3s, background-size 0.3s, background-position 0s 0.3s;
}
.button:hover {
color:#fff;
background-size:100% 100%;
background-position:right;
}
<div class="button">Some text</div>
Using this method, you will have a transition back in case you unhover rapidly.
A hacky idea to force the animation to complete is to consider a pseudo element that will make the hover area bigger and be sure you will keep the hover until the end:
.button {
position: relative;
display: inline-block;
color: #000;
border: 2px solid #000;
padding: 10px 24px;
font-size: 20px;
font-weight: 600;
text-align: center;
text-decoration: none;
background-image:linear-gradient(#000,#000);
background-size:0% 100%;
background-position:left;
background-repeat:no-repeat;
background-origin:border-box;
transition:color 0.3s, background-size 0.3s, background-position 0s 0.3s;
}
.button:hover {
color:#fff;
background-size:100% 100%;
background-position:right;
}
.button:hover:before {
content:"";
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
z-index:99;
animation:remove 0s 0.3s forwards;
}
#keyframes remove {
to {
top:100%;
}
}
<div class="button">Some text</div>