transform(變形)、transition(過渡)和animation(動畫)是CSS3動畫的3大部分。
在CSS3中,我們可以使用transition屬性來將元素的某一個屬性從“一個屬性值”在指定的時間內平滑地過渡到“另外一個屬性值”來實現動畫效果(仔細理解這句話)。
語法:
transition:屬性 持續時間 過渡方法 延遲時間;
說明:
其實transition屬性是一個復合屬性,主要包含4個子屬性:
(1)transition-property:對元素的哪一個屬性進行操作;
(2)transition-duration:過渡的持續時間;
(3)transition-timing-function:過渡使用的方法(函數);
(4)transition-delay:可選屬性,指定動畫開始出現的延遲時間;
方法是交給大家了,對於過渡的效果,大家多觀摩其它網站效果,也可以自己設計動畫。當下,扁平化風格網站風靡全球,在這一類型網站中就用到了大量的CSS3過渡效果,大家可以去這些網站看看各種過渡動畫效果是怎樣實現的,從中積累一下經驗。有機會的話,站長helicopter也會總結出來分享給大家。