这次给大家带来的动画是使用mask（蒙版）实现line-wipe动画。效果如下：

lineWipe.gif

上一篇动画:CSS3制作展示图片的cube动画有兴趣的可以看看哦！
mask知识总结：
1.| 属性 | 值 |
| ----- |:------:|
|-webkit-mask-image|url / gradient 可以使用图片或渐变作为遮罩层;
|-webkit-mask-repeat|repeat / repeat-x / repeat-y / no-repeat;
|-webkit-mask-position|x,y;
|-webkit-mask-clip|border / padding / content
|-webkit-mask-origin|border / padding / content
|-webkit-mask-size|width height（百分比或数字+px）/cover/contain
2.蒙版黑色为可见部分，灰色过渡，白色为不可见。（注意）
3.蒙版实际上是一张图片，在动画中是看不见的。如

linewipe-mask.png

例如：
-webkit-mask-image: url(../img/linewipe-mask.png);
-webkit-mask-size: 1200px;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: -360px -300px;
制作思路：
利用-webkit-mask-image 实现添加蒙版，蒙版由左往右移动，从而实现一张图片由左至右消失。在前面的div（div1）下放另一个div（相同位置，div2）。当蒙版位置移动，div1的图片消失，div2的图片逐渐出现，当这一动画结束后 ，让div1替换成div2的图片，div2替换成下一张图片，移除添加动画的class，div1在前面，div2在后面，蒙版位置也恢复原状，再继续动画，替换图片，移除动画，恢复原状，一直循环下去。
具体代码实现：
html：

    

<!--这个div在后面-->
    

<!--这个div在前面-->

css:在div2添加蒙版，不影响div1

.outer_box{    width: 600px;    height: 400px;    position: relative;    left: 200px;    top: 150px;
}.face{    position: absolute;    width: 600px;    height: 400px;
}.face:nth-child(1){     /*这个div在后面*/
    background-image: url(../img/sample2.jpg);    background-repeat: no-repeat;
}.face:nth-child(2){     /*这个div在前面*/
    background-image: url(../img/sample1.jpg);    background-repeat: no-repeat;    -webkit-mask-image: url(../img/linewipe-mask.png);    -webkit-mask-size: 1200px;    -webkit-mask-repeat: no-repeat;    -webkit-mask-position: -360px -300px;
}/*.show这个类实现mask的位置移动过渡动画*/.face.show{    -webkit-transition: -webkit-mask-position 3s linear 1s;/*实现mask移动动画，从而达到line wipe动画效果*/
    -webkit-mask-position: 1200px -300px;
}

js:通过添加和移除class（.show），达到实现mask从左到右移动动画，并通过替换图片实现图片切换。

ps：目前只兼容chrome哦！
整个项目源代码欢迎下载哦！

作者：zyfEve
链接：https://www.jianshu.com/p/15d506e54700