Strike in and out animation on hover - css

Question

I'm trying to make a strikethrough animation like the effect here:
The strike line appears from left to right and disappears from left to right.
#keyframes strike {
0% {
width: 0;
}
50% {
width: 100%;
}
100% {
width: 0;
}
}
.strike {
position: relative;
}
.strike:hover:after {
content: ' ';
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 1px;
background: black;
animation-name: strike;
animation-duration: 1s;
animation-timing-function: linear;
animation-iteration-count: 1;
animation-fill-mode: fill;
animation-direction: normal;
}
<div>
The text in the span <span class="strike">is what I want to strike out</span>.
</div>
Is there a way to achieve that only with CSS ?

Answer 1

You can use transforms and transform-origin in the keyframe animation to make strike-through apear from left to right and disapear from left to right.
The point is to scale the pseudo element on the X axis for 0 to 1 with a transform origin on the left then back to 0 with a transform origin on the right (similar to this hover effect see last example of the answer).
And here is an example with your markup :
#keyframes strike{
0% { transform-origin: 0% 50%;transform:scaleX(0); }
50% { transform-origin: 0% 50%;transform:scaleX(1); }
50.01% { transform-origin:100% 50%;transform:scaleX(1); }
100% { transform-origin:100% 50%;transform:scaleX(0); }
}
.strike {
position: relative;
}
.strike:hover:after {
content: ' ';
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 1px;
background: black;
animation: strike .75s ease-in-out forwards;
}
<div>
The text in the span <span class="strike">is what I want to strike out</span>.
</div>

Answer 2

Here is a sample using transition, where it on hover toggle left/right position.
.strike {
position: relative;
}
.strike::after {
content: ' ';
position: absolute;
top: 50%;
left: 0;
right: 100%;
height: 1px;
background: black;
}
.strike:hover::after {
right: 0;
left: 100%;
transition: right .5s .0s, left .5s .5s;
}
<div>
The text in the span <span class="strike">is what I want to strike out</span>.
</div>