CSS3中的過渡

1.過渡
transition呈現的是一種過渡，是一種動畫轉換的過程，如漸現、漸弱、動畫快慢等

語法:    transition:[transition-property  transition-duration  transition-timing-function   transition-delay ] 

transition-property  ----過渡或動態模擬的CSS屬性
IDENT：指定的CSS屬性（width、height、background-color屬性等）
all：指定所有元素支持transition-property屬性的樣式，一般爲了方便都會使用all

transition-duration  ----完成過渡所需要的時間
定義轉換動畫的時間長度，即從設置舊屬性到換新屬性所花費的時間，單位爲秒（s）

transition-timing-function ----指定過渡函數
指定瀏覽器的過渡速度，以及過渡期間的操作進展情況，通過給過渡添加一個函數來指定動畫的快慢方式
ease：速度由快到慢（默認值）
linear：速度恆速（勻速運動）
ease-in：速度越來越快（漸顯效果）
ease-out：速度越來越慢（漸隱效果）
ease-in-out：速度先加速再減速（漸顯漸隱效果）

transition-delay ----過渡開始出現的延遲時間
指定一個動畫開始執行的時間，當改變元素屬性值後多長時間去執行過渡效果
正值：元素過渡效果不會立即觸發，當過了設置的時間值後纔會被觸發
負值：元素過渡效果會從該時間點開始顯示，之前的動作被截斷
0：默認值，元素過渡效果立即執行

2.過渡的觸發機制:
僞類觸發
：hover
：active
：focus
：checked
媒體查詢：通過@media屬性判斷設備的尺寸，方向等
JavaScript觸發：用JavaScript腳本觸發

示例:
/*設置過渡*/
img { 
   /*爲防止瀏覽器兼容性，需要加上前綴*/
            -moz-transition: all 0.8s ease-in-out; /* Firefox瀏覽器 */
            -webkit-transition: all 0.8s ease-in-out;   /* Chrome瀏覽器 */
            -o-transition: all 0.8s ease-in-out;   /* Opera瀏覽器 */
            transition: all 0.8s ease-in-out;
        }
/*觸發過渡 旋轉360度並放大1.5倍*/
img:hover {
   /*爲防止瀏覽器兼容性，需要加上前綴*/
            -moz-transform: rotate(360deg) scale(1.5);
            -webkit-transform: rotate(360deg) scale(1.5);
            -o-transform: rotate(360deg) scale(1.5);
            -ms-transform: rotate(360deg) scale(1.5);
            transform: rotate(360deg) scale(1.5);
        }