意外之中，看到一个旋转裁剪的特效，于是查看代码，发现如下代码：

之后就很疑惑，这个clip是裁剪的意思，也去css3样式讲解网站上去看，发现还是不理解，只知道rect(top right bottom left)，上右下左，值都是以像素pixels为单位的。

具体是怎么个用法，也是一脸懵，放图片进行裁剪还好，但是放到动图效果里，就............

查阅资料，现在将自己的理解记录下来：

left >= right 或者 bottom <= top，则元素会被完全裁掉而不可见，即“隐藏”。

这个是值得注意的一点，但我主要想说明的是动图实现背后的原理：

clip: rect(0px, 220.0px, 2px, 0px);0%和100%的时候，是上0px，右220px，下2px，左0px。，进行裁剪显示220*2，代表了图的右端距离是220pixels，也就是图的宽度是220pixels；
同理， 2pixels定义的则是图的高度。（一般是动图的上方）

clip: rect(0px, 2px, 220.0px, 0px));25%时，是上0px，右2px，下220.0px，左0px。进行裁剪显示2*220，代表了图的右端距离是2pixels，也就是图的宽度是2pixels；

同理， 220pixels定义的则是图的高度。（一般是动图的左侧）

clip: rect(218.0px, 220.0px, 220.0px, 0px);50%时，是上218px，右220px，下220.0px，左0px。进行裁剪显示220*2，代表了图的右端距离是22pixels，也就是图的宽度是220pixels；

同理， 2pixels定义的则是图的高度。（一般是动图的下部）

clip: rect(0px, 220.0px, 220.0px, 218.0px);50%时，是上0px，右220px，下220.0px，左218px。进行裁剪上下显示2*220，代表了图的右端距离是2pixels，也就是图的宽度是2pixels；

同理， 220pixels定义的则是图的高度。（一般是动图的右侧）

看完以上的讲解，我们其实不难看出来，这只是剪切留下的部分，分为5个阶段，而我们看到的滑动的效果，则是动画的效果，而剪切则是在0%的时候显示上方，过渡到25%的时候显示左方，
又过渡到50%的时候显示下方，再到75%的时候显示右侧，最后到达远点100%。

如果还不懂，可以这样理解，正方体，你给他四条线，让四条线在不同的时间段依次出现消失，一个出现，一个消失就是动画的效果。

可能遇到的问题：
　　如果遇到动画过程中某一边闪一下，又出现，是因为给的长度或者宽度不够，让效果没办法到达彼岸，没有长宽让它走了。
　　同理，如果遇到走完了，又退去一节，则是因为给的值偏大了。

题外话：
　　我也是搞了一天，才懂的，所以希望可以帮助到和我有同样疑问的人。

附加clip的其他用法：

可以结合background-image属性与sprite结合clip来制作动画，这个第一次看到震惊到我了
http://www.zhangxinxu.com/study/201104/css-rect-img-sprite-png.html

clip: rect属性的阐述