css AnimaçãoCapítuloTrocando

Posted 2021-05-13

@keyframes bolaTeste {
  0%{width:18px;height:18px;border:0px;box-shadow: 0px 0px 1px 0px #eec842;}
  6.25%{width:18px;height:18px;border:1px solid #eec842;}
  12.5%{width:20px;height:20px;border:2px solid #eec842;}
  18.75%{width:22px;height:22px;border:3px solid #eec842;}
  25%{width:24px;height:24px;border:4px solid #eec842;}
  31,25%{width:26px;height:26px;border:5px solid #eec842;}
  37.5%{width:28px;height:28px;border:6px solid #eec842;}
  43.75%{width:30px;height:30px;border:5px solid #eec842;}
  50%{width:32px;height:32px;border:5px solid #eec842;}
  56.25%{width:34px;height:34px;border:4px solid rgba(238, 200, 66, 1);}
  62.5%{width:36px;height:36px;border:4px solid rgba(238, 200, 66, 1);}
  68.75%{width:38px;height:38px;border:3px solid rgba(238, 200, 66, 1);}
  75%{width:40px;height:40px;border:3px solid rgba(238, 200, 66, 1);}
  81.25%{width:42px;height:42px;border:2px solid rgba(238, 200, 66,0.8);}
  87.5%{widows: 44px;height:44px;border:2px solid rgba(238, 200, 66,0.6);}
  93.75%{width:46px;height:46px;border:1px solid rgba(238, 200, 66,0.4);}
  100%{width:48px;height:48px;border:1px solid rgba(238, 200, 66,0.2);}
}

.bola{
  margin: 40px 0px;
  width:18px;
  height:18px;
  border-radius: 100%;
  border:0px;
  position: absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  z-index: 9999;
  &.trocou{
    animation: bolaTeste 0.5s linear;
  }
}