用CSS遮罩实现过渡效果的示例代码(2)

定义一个名叫hide的class，当需要隐藏某张幻灯片的时候，将这个class添加上去。这个class定义了用于遮罩的sprite image。
每一帧是100%全屏展示，我们的动画包含23张图像，需要将宽度设置为23×100%＝2300%。使用CSS3 animation的steps方式过渡，添加CSS动画。我们想让sprite停在最后一帧的开头。要做到这一点，需要的步数比总数少一步，也就是22步：

.demo-1 .page-view .project:nth-child(even).hide { -webkit-mask: url(../img/nature-sprite.png); mask: url(../img/nature-sprite.png); -webkit-mask-size: 2300% 100%; mask-size: 2300% 100%; -webkit-animation: mask-play 1.4s steps(22) forwards; animation: mask-play 1.4s steps(22) forwards; } .demo-1 .page-view .project:nth-child(odd).hide { -webkit-mask: url(../img/nature-sprite-2.png); mask: url(../img/nature-sprite-2.png); -webkit-mask-size: 7100% 100%; mask-size: 7100% 100%; -webkit-animation: mask-play 1.4s steps(70) forwards; animation: mask-play 1.4s steps(70) forwards; }

最后定义动画的关键帧:

（编辑：ASP站长网）