html, body {

    width: 100%;

    height: 100%;

    display: flex;

}

​

div {

    margin: auto;

    position: relative;

    width: 300px;

    height: 400px;

    background: url(https://picsum.photos/id/20/300/400) no-repeat;

    background-size: cover;

    &::before {

        position: absolute;

        content: "";

        top: 0;left: 0; right: 0;bottom: 0;

        background: url(https://picsum.photos/id/30/300/400) no-repeat;

        background-size: cover;

        z-index: 1;

        animation: maskRotate 4s ease-in-out infinite;

    }

}

​

@keyframes maskRotate {

    @for $i from 0 through 50 { 

        #{$i}% {

            mask: linear-gradient(45deg, #000 #{$i * 2 + '%'}, transparent #{$i * 2.5 + '%'}, transparent #{$i * 2.5 + '%'});

        }

    }

    100% {

        mask: linear-gradient(45deg, #000， #000 100%);

    }

}