html, body{
    height: 100%;
    padding: 0;
    margin: 0;
}
#fondo{
    background: url(https://i.pinimg.com/originals/6b/12/e1/6b12e18acc524442af4c6ccbe567a9f3.jpg);
    background-size: cover;
    height: 100%;
    width: 100%;
    position: absolute;
}
#encima{
    position: absolute;
    height: 100%;
    width: 100%;
    -webkit-mask: url(https://i.imgur.com/AYJuRke.png);
    -webkit-mask-size: 3000% 100%;
    -webkit-animation: mask-playzero 3s steps(29) infinite;
}
#encima:before{
    content: '';
    background: url(https://wallpaperaccess.com/full/2125144.jpg);
    background-size: cover;
    height: 100%;
    width: 100%;
    position: absolute;
}
@-webkit-keyframes mask-playzero {
    from {
        -webkit-mask-position: 0 0;
        -ms-mask-position: 0 0;
        -moz-mask-position: 0 0;
        -o-mask-position: 0 0;
        mask-position: 0 0;
    }
    to {
        -webkit-mask-position: 100% 0;
        -ms-mask-position: 100% 0;
        -moz-mask-position: 100% 0;
        -o-mask-position: 100% 0;
        mask-position: 100% 0;
    }
}  
@keyframes mask-playzero {
    from {
        -webkit-mask-position: 0 0;
        -ms-mask-position: 0 0;
        -moz-mask-position: 0 0;
        -o-mask-position: 0 0;
        mask-position: 0 0;
    }
    to {
        -webkit-mask-position: 100% 0;
        -ms-mask-position: 100% 0;
        -moz-mask-position: 100% 0;
        -o-mask-position: 100% 0;
        mask-position: 100% 0;
    }
}