html, body {

    width: 100%;

    height: 100%;

    display: flex;

}

​

​

div {

    margin: auto;

    position: relative;

    width: 400px;

    height: 400px;

    background: url(https://picsum.photos/400/400?random=5) no-repeat;

    background-size: cover;

    &::before {

        position: absolute;

        content: "";

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

        background: url(https://picsum.photos/400/400?random=100) no-repeat;

        background-size: cover;

        // mask: conic-gradient(#000 0%, transparent 1%);

        z-index: 1;

        animation: maskRotate 1.2s linear;

    }

}

​

@keyframes maskRotate {

    @for $i from 0 through 100 { 

        #{$i}% {

            mask: conic-gradient(#000 #{$i - 8 + '%'}, transparent #{$i + '%'}, transparent);

        }

    }

}