JSFiddle - React, Tailwind, and code Playground

by ponzu

HTML

<div id="content">
    <div id="rect">box</div>
</div>

CSS

#content {
    position: relative;
    width:300px;
    height:150px;
    overflow:hidden;
    background:#eee;
}
#rect {
    position: absolute;
    left:-50px;
    top:50px;
    background:#87d3ff;
    width:50px;
    padding:10px 0px;
    text-align:center;
    color:#fff;
}

JavaScript

$(function () {
    setTimeout('rect()'); //アニメーションを実行
});

function rect() {
    $("#rect").animate({
        left: "350px" //要素を動かす位置
    }, 3000).animate({
        left: "-50px"　//要素を戻す位置
    }, 0)
    setTimeout("rect()", 3000);//アニメーションを繰り返す間隔
}