Passing parameters to css animation
Solution 1:
Use CSS variables and you can easily do this:
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>