SOURCE

<div class="bb"></div>

body{
	background:#009688;
}
.bb::after,.bb::before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0
}

.bb {
	position:relative;
    width: 200px;
    height: 200px;
    margin:40px auto 0;
    background: no-repeat 50% 50%/70% 70% rgba(0,0,0,.1);
    color: #69ca62;
    box-shadow: inset 0 0 0 1px rgba(105,202,98,.5)
}

.bb::after,.bb::before {
    content: '';
    z-index: -1;
    margin: -5%;
    box-shadow: inset 0 0 0 2px;
    animation: clipMe 8s linear infinite;
}

.bb::before {
    animation-delay: -4s
}

@keyframes clipMe {
    0%,100% {
        clip: rect(0,220px,2px,0)
    }

    25% {
        clip: rect(0,2px,220px,0)
    }

    50% {
        clip: rect(218px,220px,220px,0)
    }

    75% {
        clip: rect(0,220px,220px,218px)
    }
}