1、transition過渡效果
過渡效果一般是通過一些簡單的 CSS 動作觸發平滑過渡功能，比如：:hover、:focus、:active、:checked 等。
CSS3 提供了 transition 屬性來實現這個過渡功能。
實例
將滑鼠懸停在一個 div 元素上，逐步改變表格的寬度從 100px 到 300px：
div {
width:100px;
transition: width 2s;
-webkit-transition: width 2s; /* Safari */
}
div:hover {
width:300px;
}瀏覽器支持
表格中的數字表示支持該屬性的第一個瀏覽器版本號。
緊跟在 -webkit-, -ms- 或 -moz- 前的數字爲支持該前綴屬性的第一個瀏覽器版本號。
屬性定義及使用說明
transition 屬性設置元素當過渡效果，四個簡寫屬性爲：
transition-property
transition-duration
transition-timing-function
transition-delay
注意： 始終指定transition-duration屬性，否則持續時間爲0，transition不會有任何效果。
語法
transition: property duration timing-function delay;
筆者後記：對於css3新增的過渡内容和css新增動畫效果的内容大家也可以查查CSS3最新版參考手冊。不用死記硬背，即便當時忘了，直接到手冊裡查其實也一樣，你不可能每次要用的時候都忘，轉過頭反複的去查。大家都一樣方式過來的，用久了各種CSS屬性標簽都是熟能生巧的。
