[CSS3] CSS3 transition 試做分享區塊之球體彈性效果

CSS3 的 transition 功能是壞掉的印表機很喜愛的一個屬性，這次壞掉的印表機想以最少的 HTML Code 嘗試僅使用 CSS3 Transition 製作彈性效果，不使用 animation keyframes 製作，並且必須添加陰影效果，每個圖示的原始碼如下

<li> <a href="#"> <img...> </a> </li>

很乾淨對吧^^，製作上希望球體能像上彈起並有彈性效果，在球體的下方還要有陰影產生，陰影的效果必須配合球體的彈性有大小的變化，此外，在球體往上彈起之前必須讓球體稍微往下縮一點，讓他更有準備彈起蓄勢待發的Fu~

CSS3 Transition 效果本身即帶有起始與結束兩個時間點中過渡轉換的動畫效果，利用這樣的特性，在製作網頁選單上面選用 CSS3 transition 會是很方便的一種方式。在 CSS3 中除了 transition 以外的動畫屬性，大概就是 CSS3 的 animation 了，不過由於 animation 本身的一些限制，要做到純 CSS 不使用 javascript 來控制動畫效果，其實有點缺點，建議大家可以多使用 transition 屬性，算是簡單方便又好用喔^^