在工作中，经常要写一点小动画，这时候用jquery的动画麻烦，用css3的animate太复杂，而且兼容不好，这个时候，用点css3的小特性，就很方便了，代码也少，效果还是棒棒的！
1.1 首先使用的是box-shadow，css3属性，阴影。box-shadow的兼容性是 IE9+、Firefox 4、Chrome、Opera 以及 Safari 5.1.1 支持 box-shadow 属性。基本在工作中都能用到，下面来看看属性：
box-shadow: h-shadow v-shadow blur spread color inset; h-shadow: 必需。水平阴影的位置。允许负值。
v-shadow: 必需。垂直阴影的位置。允许负值。
blur: 可选。模糊距离。
spread: 可选。阴影的尺寸。
color: 可选。阴影的颜色。
inset: 可选。将外部阴影 (outset) 改为内部阴影。
在实际的工作中，可能遇到要四周阴影的，这个时候就要一个小技巧：
将h-shadow和v-shadow设置为0，这个时候要设置模糊距离了，不然就没有阴影
1.2 下面介绍的是transition和transform。为什么给这两个一起介绍，因为在使用的过程中，基本都是结合在一起使用，很少分开。
transition兼容性： Internet Explorer 10、Firefox、Opera 和 Chrome 支持 transition 属性 。
兼容到ie10。 所以在使用的时候就要注意了，在特点的场合就放弃吧。
transition: property duration timing-function delay; transition-property: 规定设置过渡效果的 CSS 属性的名称。(一般都使用all,这样就在使用多个渐变属性时，不要多次添加)
transition-duration : 规定完成过渡效果需要多少秒或毫秒。
transition-timing-function: 规定速度效果的速度曲线。
transition-delay: 定义过渡效果何时开始。(也就是延时执行)
1.3 transform :
Internet Explorer 10、Firefox、Opera 支持 transform 属性。
Internet Explorer 9 支持替代的 -ms-transform 属性（仅适用于 2D 转换）。
Safari 和 Chrome 支持替代的 -webkit-transform 属性（3D 和 2D 转换）。
Opera 只支持 2D 转换。
今天主要说的是2D转换，3D以后再议。
transform的属性比较其上两个就多了很多了，有十几个，包括2D和3D转换。
（图片引自w3school）