Xenforo forum sitesinde hareketli online ikonları nasıl yapılır?

.m-avatar-wrapper .m-avatar-online {
    display: inline-block;
        width: 16px;
        height: 16px;
        margin: 0px 0 0 0px;
        background: #fff;
        border: none!important;
        border-radius: 50%!important
}
.m-avatar-wrapper .m-avatar-online:before {
    content: '';
        position: absolute;
        width: 10px;
        height: 10px;
        margin: 1px 0 0 -6px;
        background: #7fb900;
        border-color: #7fb900;
        border-radius: 50%
}
.m-avatar-wrapper .m-avatar-online:after {
    content: '';
        position: absolute;
        width: 32px;
        height: 32px;
        margin: -10px 0 0 -20px;
        border: 2px solid #7fb900;
        border-radius: 50%;
        box-shadow: 0 0 5px #7fb900, inset 0 0 5px #7fb900;
        -webkit-transform: scale(0);
        -webkit-animation: online 2.5s ease-in-out infinite;
        animation: online 2.5s ease-in-out infinite
    }
@-webkit-keyframes online
    {
          0% {opacity: 1;-webkit-transform: scale(0)}
         50% {opacity: .7}
        100% {opacity: 0;-webkit-transform: scale(1)}
    }

@keyframes online
    {
          0% {opacity: 1;transform: scale(0)}
         50% {opacity: .7}
        100% {opacity: 0;transform: scale(1)}
    }