JSFiddle - React, Tailwind, and code Playground
CSS
@keyframes leaf
{
from
{
opacity:0;
}
to
{
opacity:1;
}
}
div:hover
{
border:1px solid black;
-webkit-animation-name:leaf;
-webkit-animation-duration: 2s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-delay: 1s;
}
div {
background-color: blue; width: 300px; height: 300px;
border-top-right-radius:170px;
border-bottom-left-radius:170px;
}
JavaScript
$('<div>').appendTo(document.body).animate({opacity:0}, 700);