$img: 'https://avatars.githubusercontent.com/u/8554143?v=4';

@import url(https://fonts.googleapis.com/css?family=Righteous);
    
.container {
    width: 200px;
    margin: 20px auto;
}

.avator {
    position: relative;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: url($img) no-repeat center center;
    background-size: 100% 100%;
    
    &::after {
        content: "";
        position: absolute;
        // top: 10%;
        left: 0%;
        width: 100%;
        height: 100%;
        background: inherit;
        background-size: 100% 100%;
        border-radius: 50%;
        transform: scale(.95);
        // filter: blur(10px) brightness(80%) opacity(.8);
        z-index: -1;
        animation: filterChange 10s infinite linear;
    }
}

p {
    margin-top: 30px;
    text-align: center;
    font-size: 28px;
    font-family: Righteous;
}

@keyframes filterChange {
    0% {
        top: 0;
        filter: blur(0) brightness(101%) opacity(1);
    }
    40% {
        top: 10%;
        filter: blur(0) brightness(101%) opacity(1);
    }
    80% {
        top: 10%;
        filter: blur(10px) brightness(80%) opacity(.8);
    }
    100% {
        top: 10%;
        filter: blur(10px) brightness(80%) opacity(.8);
    }
}