这次给大家带来的动画是使用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：
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){
background-image: url(../img/sample2.jpg); background-repeat: no-repeat;
}.face:nth-child(2){
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;
}.face.show{ -webkit-transition: -webkit-mask-position 3s linear 1s;
-webkit-mask-position: 1200px -300px;
}js:通过添加和移除class（.show），达到实现mask从左到右移动动画，并通过替换图片实现图片切换。
ps：目前只兼容chrome哦！
整个项目源代码欢迎下载哦！
作者：zyfEve
链接：https://www.jianshu.com/p/15d506e54700
