JSFiddle - React, Tailwind, and code Playground

by ponzu

HTML

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

CSS

#rect {
    background:#87d3ff;
    width:100px;
    padding:10px;
    margin:100px auto 0;
    text-align:center;
    color:#fff;
}

JavaScript

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

function rect() {
    $("#rect").animate({
        opacity: ".3"
    }, 2000).animate({
        opacity: "1"
    }, 2000);
    setTimeout("rect()", 4000); //アニメーションを繰り返す間隔
}