为啥来掘金发文章
满心欢喜写了一篇满意的博客，但是发现没多少人知道我的博客。。。 这种动效也是我灵光一闪想出来的，当然需要一些基础的沉淀。当然在此王婆卖瓜自卖自夸一下，我觉得这是一篇好文。
动画效果
技术储备
这里需要两种技术沉淀，第一种是transition-timing-function中的steps，它可以使动画像阶梯状呈现，就像一部连续的电影取其中的几帧一样。第二种是-webkit-mask遮罩，在css中若对一个元素使用遮罩，那被遮元素则只能看见一部分内容，这部分就是遮罩图片不透明的部分。如果遮罩图片有半透明的部分，则也会显示出来，只不过显示出来的部分也是半透明的。
思路
首先我们假设有这样一张遮罩图片
里面的数字代表透明度
然后我们把遮罩元素的大小定义为宽400%高100%。
现在我们遮罩的位置在初始位置，所以我们是看不见任何东西的。
那如果我们遮罩的位置向右移动一格呢？我们会发现右上角有一个小方块能显示出来了，按照规律一步步的向右移动，最后该元素就会完全显示！
好了，我们现在要解决一个每次移动都精准的只移动一格的问题。
首先我们要让遮罩移动，则一定会改变-webkit-mask-position，它的作用规则与background-position是一样的。无论背景大小定义的有多大，只要他们的值定义为100%，那就会移动到最右边。然后steps函数就派上了用场，我们设定移动到最右边需要9步，那么每一次截图出来的动画正好是移动一格的位置。
@keyframes wpSpan{
0%{
-webkit-mask-position:0;
}
100%{
-webkit-mask-position:100%;
}
}
.x1{
height:510px;
background-image: url(./img/border-1.png);
background-size:cover;
-webkit-mask-image:url(./svg/8.svg);
-webkit-mask-size: 400% 100%;
visibility: hidden;
-webkit-mask-position:0;
transition: -webkit-mask-position 1s steps(9,end),visibility 0s 1s;
}
.x1.active{
visibility:visible;
-webkit-mask-position:100%;
transition: -webkit-mask-position 1s steps(9, end);
}
图片选择
其实这样看来，最后使这个动画实现的决定性因素其实是图片。我曾经做过这样的探索，如果使用canvas创建一个这样一个图片并转换为base64格式能不能实现这样的效果呢？
结论是实现效果不理想，因为图片太小，在放大后小方格就显示不出来了，如果图片太大，那获取图片的代价有点大，而且有失真的缺点。
所以我选择的是svg图片，如果要制作上述的遮罩，只要设定宽12高3，在非透明的地方放入小方块。
普通的svg图片是不能自适应大小的，所以我们要设置如下
结束语
如果想要这张svg图片和源代码的话，欢迎在我的主页中找到我的博客，再找到这篇文章，名字应该是一样的，在这篇文章的底部有哦。
