于是，我们只要加个动画时间，以及无限执行就OK啦~~
CSS Code复制内容到剪贴板
.spiner { transform-origin: rightright center; animation: spin .8s infinite linear; }
.filler { animation: second-half-hide .8s steps(1, end) infinite; }
.masker { animation: second-half-show .8s steps(1, end) infinite; }
其他细节都是定位什么的，很基础的知识，就不啰嗦啦~~
饼其实还没有做好
啊，捣鼓了这么久还没有结束啊？
没错。仔细查看gif动画，你会发现，蛋饼它是从全盘都0再到整个360度覆盖的。
而，上午捣鼓的动画只是从360度无死角覆盖到0覆盖。一旦覆盖结束，就又要走360度开始，不连贯，怎么破？
我是这么处理的：
再覆盖一个蛋饼从0度到360度展示的动画。与一直捣鼓的动画前后半程分别展示就可以了。
于是，最终有如下HTML:
XML/HTML Code复制内容到剪贴板
<div class="inner">
<div class="spiner"></div>
<div class="filler"></div>
<div class="masker"></div>
</div>
<div class="inner2">
<div class="spiner"></div>
<div class="filler"></div>
<div class="masker"></div>
</div>
inner和inner2也使用的前后半程隐藏的动画，动画时间正好是一个周期的2倍。
CSS Code复制内容到剪贴板
.inner { opacity: 1; animation: second-half-hide 1.6s steps(1, end) infinite; }
.inner2 { opacity: 0; animation: second-half-show 1.6s steps(1, end) infinite; }
于是，就有了完美的做蛋饼效果了。
