JSFiddle - React, Tailwind, and code Playground

by stormtea

HTML

<div><span class="circle_num"></span></div>

CSS

div {
  border-radius:50%;
  width: 150px;
  height: 150px;
  margin:10% auto 0 auto;
  background-color: rgba(224, 36, 40, 1);
  animation: circle 5s .3s infinite cubic-bezier(1,.015,.295,1.225) alternate;
    
    -webkit-animation: circle 5s .3s infinite cubic-bezier(1,.015,.295,1.225) alternate;
}
.circle_num {
    display:block;
    text-align:center;
    color:#fff;
}

@keyframes circle {
  0%  {
    border-radius:50% 50% 50% 50%;
    background:rgba(224, 36, 40, 1);
    transform:rotate(0deg);
  }
  
  10% {
    border-radius:0 50% 50% 50%;
    background:rgba(224, 36, 40, 1);
    transform:rotate(0deg);
  }
  
  20%  {
    border-radius:50% 50% 50% 50%;
    background:rgba(255, 109, 24, 1);
    transform:rotate(45deg);
  }
  30%  {
    border-radius:50% 0 50% 50%;
    background:rgba(224, 36, 40, 1);
    transform:rotate(90deg);
  }
  
   40%  {
    border-radius:50% 50% 50% 50%;
    background:rgba(255, 109, 24, 1);
    transform:rotate(45deg);
  }
  
  50%  {
    border-radius:50% 50% 0 50%;
    background:rgba(224, 36, 40, 1);
    transform:rotate(90deg);
  }
  
  60%  {
    border-radius:50% 50% 50% 50%;
    background:rgba(224, 36, 40, 1);
    transform:rotate(90deg);
  }
 
 
  70%  {
    border-radius:50% 50% 50% 0;
    background:rgba(255, 109, 24, 1);
    transform:rotate(135deg);
  }
  
  80%   {
    border-radius:50% 50% 50% 50%;
    background:rgba(224, 36, 40, 1);
    transform:rotate(90deg);
  }
 
  90% {  
    border-radius:0 50% 50% 50%;
    background:rgba(224, 36, 40, 1);
    transform:rotate(180deg);
  }
  
  100% {  
    border-radius:50% 50% 50% 50%;
    background:rgba(224, 36, 40, 1);
    transform:rotate(180deg);
  }
}

@-webkit-keyframes circle {       0%  {
    border-radius:50% 50% 50% 50%;
    background:rgba(224, 36, 40, 1);
    transform:rotate(0deg);
  }
  
  10% {
    border-radius:0 50% 50% 50%;
    background:rgba(224, 36, 40, 1);
    transform:rotate(0deg);
  }
  
  20%  {
    border-radius:50% 50% 50% 50%;
   ...