Execute :hover and :hover:after animation with keyframes on component load - css

Question

i would like to play this hover animation on component load, because I wrote a JS function that checks if the component is in the viewport and reloads it (changes its class).
You can use Sass (scss) or regular css.
.module .active {
display: inline-block;
position: relative;
color: var(--text-color-dark);
animation: loadInAnimation ease 3s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
#keyframes loadInAnimation { // add :hover and :hover:after event
0% {
// start of animation
}
100% {
// end ofanimation
}
}
.module .active:after { // transform into keyframe animation
content: '';
position: absolute;
width: 100%;
transform: scaleX(0);
height: 2px;
bottom: 0;
left: 0;
background-color: var(--primary-color);
transform-origin: bottom right;
transition: transform 0.25s ease-out;
}
.module .active:hover:after { // transform into keyframe animation
transform: scaleX(1);
transform-origin: bottom left;
}
Thank you for your help!
JS (irrelevant):
<script>
function reveal() {
var reveals = document.querySelectorAll(".reveal");
console.log(reveals);
for (var i = 0; i < reveals.length; i++) {
var windowHeight = window.innerHeight;
var elementTop = reveals[i].getBoundingClientRect().top;
var elementVisible = 150;
if (elementTop < windowHeight - elementVisible) {
reveals[i].classList.add("active");
} else {
reveals[i].classList.remove("active");
}
}
}
window.addEventListener("scroll", reveal);
window.addEventListener("load", reveal);
</script>
HTML (also irrelevant):
<h2 className='heading reveal'>Tennisakademie Vasquez</h2>

Answer 1

I've fixed the animation with an additional element providing the :after feature:
.module .heading {
font-size: 2.75rem;
font-weight: 700;
margin-bottom: 2rem;
font-family: 'Oswald', sans-serif;
font-weight: 200;
color: var(--text-color-dark);
}
.module .active {
display: inline-block;
position: relative;
color: var(--text-color-dark);
animation-iteration-count: 1;
animation-fill-mode: forwards;
.reveal-line {
transform: scaleX(1);
transform-origin: bottom left;
content: '';
position: absolute;
width: 100%;
height: 2px;
bottom: 0;
left: 0;
background-color: var(--primary-color);
transform-origin: bottom right;
transition: transform 0.6s ease-out;
animation: loadInAnimation ease 1.5s;
}
}
#keyframes loadInAnimation {
0% {
width: 0%;
}
100% {
width: 100%;
}
}
<h3 className='heading reveal'>Unsere Angebote<div className='reveal-line' /></h3>