How to change value of keyframe dynamically?

Question

I have the following code to move an image

@-webkit-keyframes mymove {
  from {left: 0px;}
  to {left: 40%;}
}

Now I need to change the value of left ie 40% using javascript how do i achieve this ?

Answer 1

Here's the reference for using transition:

document.querySelector('.box').addEventListener('click', function() {
   // set the left value dynamically
   this.style.left = '40%';
});

/* cosmetics, ignore these */
.box {
  width: 100px;
  height: 100px;
  background-color: salmon;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
}

/* relevent styles */
.box {
  position: absolute;
  left: 0;
  transition: left 0.5s;
}

<div class="box">click me</div>