带剪辑的动画：rect

Question

必须使用光线为图像设置动画。我是通过以下方式完成的：

.lightLong {
    -webkit-animation-name: lightLong;
    animation-name: lightLong;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
}

@-webkit-keyframes lightLong {
    0% {
        clip: rect(0px 1162px 64px 1094px);
    }
    100% {
        clip: rect(0px 1162px 481px 0px);
    }
}


@keyframes lightLong {
    0% {
        clip: rect(0px 1162px 64px 1094px);
    }
    100% {
        clip: rect(0px 1162px 481px 0px);
    }
}

这就是发生的事情： what happens with image
可以做些什么来避免动画中的角度，它就像一道光线？ 可能会强加一些面具或类似的东西？ 这是示例：http://jsbin.com/wamoyereya/edit?html,css,output 谢谢！