JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.rawgit.com/web-animations/web-animations-js/master/web-animations-next.min.js"></script>
<div class="box" id="box"></div>

<button onclick="pause();">Pause</button>
<button onclick="play();">Play</button>
<button onclick="stop();">Stop</button>

CSS

.box
{
    width:200px;
    height:200px;
    background:rgba(0,0,255,0.5);
}

JavaScript

var elem = document.querySelector("#box");
    
    var player = elem.animate([
        {offset: 0.0, margin: "0px 0px 0px 90%"},
        {offset: 0.5, margin: "0px 0px 0px 10%"},
        {offset: 1.0, margin: "0px 0px 0px 90%"}
    ], {
        duration: 5000,
        iterations: Infinity
    });
    
    function pause()
    {
        player.pause();
    }
    
    function play()
    {
        player.play();
    }
    
    function stop()
    {
        player.cancel();
    }