JSFiddle - React, Tailwind, and code Playground

HTML

<div class="block1"></div>
<div class="block2"></div>

CSS

.block1 {
    position: relative;
    width: 100px;
    height: 100px;
    background: tomato;
    margin-bottom: 10px;
}

JavaScript

var block1 = document.querySelector('.block1');
var player1 = block1.animate([
    {
        left: "0",
        transform: "rotate(0deg)",
        borderRadius: "0",
        //background: "tomato",
        //Uncaught NotSupportedError: Failed to execute 'animate' on 'Element': Partial keyframes are not supported. 
        offset: 0
    },
    {
        borderRadius: "25px",
        transform: "rotate(90deg) translateY(-10px) scale(.8)",
        offset: 2/4
    },
    {
        borderRadius: "50px",
        transform: "rotate(180deg) translateY(10px) scale(.5)",
        offset: 3/4
    },
    {
        left: "300px",
        transform: "rotate(360deg) translateY(0px) scale(.3)",
        borderRadius: "50px",
        offset: 1
    }
], {
    duration: 1000,
    iterations: Infinity,
    direction: 'alternate',
    easing: "ease-in"
});