I have this piece of css but I want to change the width in the keyframe with a variable in javascript. How can I do that?
@keyframes test {
100% {
width: 100%;
}
}
>Solution :
Does it have to be a keyframe animation? Typically you would use the CSS transition property for this kind of animation powered by JavaScript, like this:
var width = 50;
document.getElementById('button').addEventListener('click', () => {
width = width + 50;
document.getElementById('box').style.width = width + 'px';
});#box {
background: red;
height: 50px;
width: 50px;
transition: width .5s;
margin-bottom: 1em;
}<div id="box"></div>
<button id="button">Change Width</button>