SOURCE

<div class="circle">
    <div class="circle1">
        <div class="circle2">
            <span class="name"><span>
        </div>
    </div>
</div>

.name{
    color:white;
    text-align:center;
    
}
.name::before{
    content: "￥";
    margin-left:-2px;
}
.name::after{
    content: "$";
   -webkit-animation:an 2s linear 0s infinite alternate;
   -webkit-animation-timing-function: cubic-bezier(0, 0.2, 0.32,4 );
}
@keyframes an{
    0% {color:#000;font-size:10px;font-weight:400;}
    25% {color:#333;font-size:20px;font-weight:500;}
    50% {color:rgb(190, 127, 127);font-size:30px;font-weight:600;}
    75% {color:rgb(78, 194, 43);font-size:40px;font-weight:700;}
    100% {color:rgb(24, 80, 153);font-size:50px;font-weight:800;}
}
.circle,.circle1,.circle2{
    border:1px solid white;
    border-radius:50%;
    display: flex;
    align-items: center;
    justify-content:center;
}
.circle{
   width:200px;
   height:200px;
     -webkit-animation:_border 2s linear 0s infinite alternate;
}
.circle1{
 width:150px;
   height:150px;
     -webkit-animation:_border1 2s linear 0s infinite alternate;
}
.circle2{
 width:100px;
   height:100px;
     -webkit-animation:_border2 2s linear 0s infinite alternate;
}
@keyframes _border{
      0% {border-color:#000;opacity:0}
    25% {border-color:#333;opacity:0.25}
    50% {border-color:rgb(190, 127, 127);opacity:0.5}
    75% {border-color:rgb(78, 194, 43);opacity:0.75;}
    100% {border-color:rgb(24, 80, 153);opacity:1;}
}
@keyframes _border1{
      0% {border-color:#000;opacity:0}
    25% {border-color:#333;opacity:0.25}
    50% {border-color:rgb(190, 127, 127);opacity:0.5}
    75% {border-color:rgb(78, 194, 43);opacity:0.75;}
    100% {border-color:rgb(24, 80, 153);opacity:1;}
}
@keyframes _border2{
      0% {border-color:#000;opacity:0}
    25% {border-color:#333;opacity:0.25}
    50% {border-color:rgb(190, 127, 127);opacity:0.5}
    75% {border-color:rgb(78, 194, 43);opacity:0.75;}
    100% {border-color:rgb(24, 80, 153);opacity:1;}
}