JSFiddle - React, Tailwind, and code Playground

by Jonathan Smith

HTML

<div style="left: 50%; margin-left: -50px;" class="circle">
</div>

<div class="left smallcircle">
</div>
<div class="middle smallcircle">
</div>
<div class="right smallcircle">
</div>

CSS

.circle{
     width: 100px;
     height: 100px;
     border-radius: 50%;
     background-color: blue;
     position: absolute;
  }

  .smallcircle{
     width: 33px;
     height: 33px;
     border-radius: 50%;
     background-color: red;
     float: left;
    opacity:0;
     -webkit-animation: smallcirclefadein 0.66s 0.25s;
    -moz-animation: smallcirclefadein 0.66s 0.25s;
    -ms-animation: smallcirclefadein 0.66s 0.25s;
    -o-animation: smallcirclefadein 0.66s 0.25s;
    animation: smallcirclefadein 0.66s 0.25s;
    -webkit-animation-fill-mode:forwards;
-moz-animation-fill-mode:forwards;
animation-fill-mode:forwards;
  }

@-webkit-keyframes smallcirclefadein {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}