JSFiddle - React, Tailwind, and code Playground

HTML

<div><br><center><a>o<a>o</a><span>&nbsp;</span><span id="f">&nbsp;</span>

CSS

a,div{width:5em;border:2px solid;border-radius:50%}hr{width:50%}
span{display:block; border-bottom:2px solid;border-radius:50%}
#f{padding-top:0; margin-bottom:2em; line-height: 100%;
    position:relative;
    animation:myfirst .5s;
    -webkit-animation:myfirst .5s; /* Safari and Chrome */
    animation-iteration-count:infinite;
    -webkit-animation-iteration-count:infinite;
    animation-direction:alternate;
    -webkit-animation-direction:alternate; /* Safari and Chrome */
    animation-timing-function:linear;
    -webkit-animation-timing-function:linear; /* Safari and Chrome */
}

@keyframes myfirst
{
from {top:0;}
to {top:-1em}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {top:0;}
to {top:-1em}
}