<div></div>
@property --per {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 100%;
}

body {
  display: grid;
  place-content: center;
}

div {
  background: url(https://picsum.photos/400/400?random=100);
  width: 400px;
  height: 400px;
  animation: change 3s infinite linear;
  -webkit-mask: linear-gradient(#000, #000 var(--per), transparent var(--per), transparent);
  -webkit-mask-size: 100% 20px;
}

@keyframes change {
  0%,60% {
    --per: 100%;
  }
  70%,100% {
    --per: 0%;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.