pass js variable to css animation
document.querySelector('.p2').style.setProperty('--m','100%');
document.querySelector('.p2').style.setProperty('--w','300%');
.p1,.p2 {
animation-duration: 3s;
animation-name: slidein;
}
@keyframes slidein {
from {
margin-left: var(--m, 0%);
width: var(--w, 100%);
}
to {
margin-left: 0%;
width: 100%;
}
}
<p class="p1">
This will not animate as the animation will use the default value set to the variable
</p>
<p class="p2">
This will animate because we changed the CSS variable using JS
</p>