JSFiddle - React, Tailwind, and code Playground

by Vanessa RC

HTML

<div class="circle">
</div>

CSS

.circle {
  width: 100px;
  height: 100px; 
  margin: 0 auto;
  background-color: #000;
  border-radius: 100%;
  opacity: 0;
  
  animation: fadein 10s ;
  -moz-animation: fadein 10s ; 
  -webkit-animation: fadein 10s ; 
  -o-animation: fadein 10s ; 

  -webkit-animation-delay: 3s;
  animation-delay: 3s;
}

@keyframes fadein {
   0%  { opacity:0; }
  100% { opacity:1; }
}
@-moz-keyframes fadein { 
    0%  { opacity:0; }
  100% { opacity:1; }
}
@-webkit-keyframes fadein { 
    0%  { opacity:0; }
  100% { opacity:1; }
}
@-o-keyframes fadein {
    0%  { opacity:0; }
  100% { opacity:1; }
}