JSFiddle - React, Tailwind, and code Playground

HTML

<div class="block"></div>
<button id="animate">アニメーションを作成する</button>
<button id="cancel">player.cancel()</button>

CSS

.block {
    position: relative;
    width: 100px;
    height: 100px;
    background: tomato;
}
button{
    display: block;
    padding: 5px;
    font-size: 16px;
}

JavaScript

var block, player;

document.querySelector('#animate').addEventListener('click', function(){
    block = document.querySelector('.block');
    player = block.animate([
        {
            left: "0"
        },
        {
            left: "100px"
        }
    ], {
        duration: 3000,
        easing: "ease-in"
    });
});

document.querySelector('#cancel').addEventListener('click', function(){
    player.cancel();
});