Edit in JSFiddle

@-webkit-keyframes fade {
        0% {
                -webkit-mask-position: 0 0;
        }
        100% {
                -webkit-mask-position: 0 -1510px; /* 755 * -2 */
        }
}

@-moz-keyframes fade {
        0% {
                -moz-mask-position: 0 0;
        }
        100% {
                -moz-mask-position: 0 -1510px;
        }
}


#img1 {
    background: url("http://www.fringebloggers.com/wp-content/uploads/2008/08/beyondfringe2.jpg") no-repeat;
}

#img2 {
    -webkit-animation: fade 6s infinite;
    -moz-animation: fade 6s infinite;
    -webkit-animation-delay: 3s;
    -moz-animation-delay: 3s;
    -webkit-animation-direction: alternate;
    -moz-animation-direction: alternate;
    
    -webkit-mask-image: -webkit-linear-gradient(bottom, rgba(0,0,0,1), rgba(0,0,0,1), rgba(0,0,0,0), rgba(0,0,0,0));
    -moz-mask-image: -moz-linear-gradient(bottom, rgba(0,0,0,1), rgba(0,0,0,1), rgba(0,0,0,0), rgba(0,0,0,0));
    -webkit-mask-size: 513px 2265px; /* 755 * 3 */
    -moz-mask-size: 513px 2265px; /* 755 * 3 */
}
<div id="img1">
    <img src="http://www.fringebloggers.com/wp-content/uploads/2008/08/beyondfringe3.jpg" id="img2" alt="" />
</div>