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,
        iterations: 1,
        easing: "ease-in",
        fill: "forwards"
    });
    player.addEventListener('finish', function(){
        alert('done!');
    }, false);
});

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