html,

body {

    height: 100%;

}

​

.img1 {

    position: absolute;

    height: 100%;

    width: 100%;

    left: 0;

    top: 0;

    background: url(https://s.newtalk.tw/album/news/111/5a558de0a141b.jpg);

    background-size: cover;

}

​

.img2 {

    position: absolute;

    height: 100%;

    width: 100%;

    left: 0;

    top: 0;

    background: url(https://estnn.com/wp-content/uploads/2020/07/yone-splash-800x450.jpg);

    background-size: cover;

    mask: url(https://i.imgur.com/AYJuRke.png);

    mask-size: 3000% 100%;

    animation: maskMove 2s steps(29) infinite;

}

​

@keyframes maskMove {

    from {

        mask-position: 0 0;

    }

    to {

        mask-position: 100% 0;

    }

}

​