console
<div class='bb'></div>
.bb {
position:relative;
width: 400px;
height: 200px;
margin:40px auto 0;
border: 1px solid black;
background: gainsboro;
}
.bb::after,.bb::before {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
content: '';
z-index: 11;
margin: -10px;
box-shadow: inset 0 0 0 2px;
animation: clipMe 8s linear infinite;
}
.bb::before {
animation-delay: -4s
}
@keyframes clipMe {
0%,100% {
clip: rect(0,210px,2px,0)
}
16.7% {
clip: rect(0,2px,220px,0)
}
33.3% {
clip: rect(218px,210px,220px,0)
}
50.1% {
clip: rect(218px,420px,220px,210px)
}
66.6% {
clip: rect(0,420px,220px,418px)
}
83.3% {
clip: rect(0,420px,2px,210px)
}
}