SOURCE

<div class="box"></div>

.box {
    height: 200px;
    width: 200px;
    background: rgba(10, 150, 220, 0.5);
    margin: 50px auto;
    position: relative;
}

.box::after,
.box::before {
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    box-shadow: inset 0 0 0 2px rgba(10, 110, 120, 0.5);
    /*内阴影 inset*/
    left: 0;
    top: 0;
    margin: -10px;
    /* clip: rect(0px,220px,2px,0px);
    clip: rect(0px,2px,220px,0px);
    clip: rect(218px,220px,220px,0px);
    clip: rect(0px,220px,220px,218px); */
    animation: aaa 6s linear infinite;
}

.box::before {
    animation-delay: 3s;
}

@keyframes aaa {
    0%,
    100% {
        clip: rect(0px, 220px, 2px, 0px);
    }
    25% {
        clip: rect(0px, 2px, 220px, 0px);
    }
    50% {
        clip: rect(218px, 220px, 220px, 0px);
    }
    75% {
        clip: rect(0px, 220px, 220px, 218px);
    }
}