JSFiddle - React, Tailwind, and code Playground

by Ananth Arumugasamy

HTML

<div id ="div1">
</div>

<div id ="div2">
</div>

<div id="div3">
</div>

CSS

#div1{
    border:solid;
    border-radius:50px;
    width:40px;
    height:40px;
    animation-name:khushbu;
    animation-duration:5s;
    animation-iteration-count:infinite;
    animation-direction:alternate;
}
#div2{
    border:solid;
    border-radius:50px;
    width:40px;
    height:40px;
    animation-name:jesse;
    animation-duration:20s;
    animation-iteration-count:infinite;
    animation-direction:alternate;
}

#div3{
    border:solid;
    border-radius:50px;
    width:40px;
    height:40px;
    animation-name:shraukh;
    animation-duration:5s;
    animation-iteration-count:infinite;
    animation-direction:alternate;
}

@keyframes khushbu
{
    from{background-color:red;}
    to{background-color:blue;}
}

@keyframes jesse{
    0%{color:blue;}
    25%{color:green;}
    50%{color:yellow;}
    100%{color:red;}
}

@keyframes shraukh{
    0%{margin-left:25px;}
    25%{margin-left:125px;}
    50%{margin-left:225px;}
    100%{margin-left:325px;}
}