<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;
mask: linear-gradient(#000, #000 var(--per), transparent var(--per), transparent);
mask-size: 100% 20px;
}
@keyframes change {
0%,60% {
--per: 100%;
}
70%,100% {
--per: 0%;
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.