使用遮罩的图像动画效果

Question

我正在使用CSS和jQuery为图像创建一个小动画。在下面的代码中，我使用scroll函数使动画处理滚动。

JS-Fiddle

以下是代码：

<section class="section1" id="ideal" data-wow-duration="1s" data-wow-delay="1s">
   <h3>The Thought</h3>
      <div class="animate">
          <img class="img-responsive" src="img/pic1.jpg"/>
          <div class="mask">
          </div>
      </div>
   <p class="" data-wow-duration="1s" data-wow-delay="1s">Lorem Ipsum</p>
</section>

我的jQuery是：

$(window).one('scroll',function(){
   $('.animate>.mask').animate({
     'opacity': '50'
   }, {
      step: function (now, fx) {
        $(this).css({"transform": "translate3d("+ now +"px, 0px, 0px)"});
    },
    duration: 3000,
    easing: 'linear',
    queue: false,

}, 'linear');
$(".animate>.mask").animate({ textIndent: 30 }, {
    duration : 3000,
    easing: 'linear',
    queue: false
});
})

和CSS：

.mask{
background: #fff;
bottom: 0;
height: 82%;
right:0;
position: absolute; 
width: 15%;
margin:7.5% 0;
z-index: 100;
top:100%;
}

在此我尝试用于five部分。这里的问题是它只运行一次，我使用的mask CSS也适用于一个部分，剩下的部分都不起作用。