SOURCE

<script src=" https://cdn.jsdelivr.net/gh/yangbe/assets@js/anime3.1.0/anime.min.js"></script>

<div class="css-selector-demo">
        <div class="line" style="border: 1px solid #fff;">
            <div class="square shadow"></div>
            <div class="square el"></div>
        </div>
    </div>

    <script type="text/JavaScript">
        // var mySquare = document.getElementsByClassName('el');
        // mySquare[0].style.cssText ="transform:translateX(-28px);";

        // anime({
        //     targets: '.css-selector-demo .el',
        //     translateX: 400,
        //     scale: 1.2,
        //     duration: 750,
        //     delay: 400,
        //     endDelay: 200,
        //     loop: true,
        //     direction: 'alternate',
        //     easing: 'spring',
        // });

        var line = document.getElementsByClassName('line')[0];


        // line.style.cssText += ";border-radius: 8px";
        // setInterval(changeBg, 2050);
        // function changeBg() {
        //     // line.setAttribute("style", "background-color: yellow");
        //     line.classList.toggle('line-A');
        // }


        anime({
            targets: '.css-selector-demo .el',
            translateX: {value:[-28,line.clientWidth-56], duration:1250},
            scale: {value:1, duration: 1250},
            rotate: {value: '1turn', duration:1250},
            delay: 400,
            endDelay: 600,
            loop: true,
            direction: 'alternate',
            easing: 'spring'
        });

    </script>

 * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .css-selector-demo {
            display: flex;
            width: 100%;
            height: 160px;
            background-color: #252423;
            padding: 20px;
            justify-content: center;
            align-items: center;
        }

        .line {
            display: flex;
            flex-direction: row;
            background-color: aqua;
            align-items: center;
            /* justify-content: center; */
            width: 60%;
        }

        .line-A {
            background-color: orchid;
        }

        .square {
            width: 28px;
            height: 28px;
            background-color: #fd4d50;
        }

        .shadow {
            opacity: .3;
        }