<div></div>

<button id="animate">Animate</div>
<button id="set">Set div width 100px</button>
div {
  width: 50px;
  height: 50px;
  background: red;
}
const div = document.querySelector('div');
let animation;

document.querySelector('#animate').addEventListener('click', () => {
  animation = div.animate([
    {width: '50px'},
    {width: '200px'},
  ], {
    duration: 500,
    fill: 'forwards'
  })
});

document.querySelector('#set').addEventListener('click', () => {
  // animation.cancel();
  // comment 👆 line and 👇 line will no affect
  div.style.width = '100px';
});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.