在工作中，經常要寫一點小動畫，這時候用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）