1. 程式人生 > >css3——transition過渡屬性

css3——transition過渡屬性

今天學習了CSS3的過渡屬性,總結一下:
transition有4個屬性:
第一個是要過渡的樣式 ,all(所有) || attr || none(不寫)一般情況下都是設定某個屬性來設定過渡,例如:transition : width 0.3s.

第二個是運動的時間,單位是s(秒) || ms(毫秒),可以為不同的屬性設定不同的運動時間,例如 : transition : width 0.8s, height 2s.

第三個是延遲時間,單位也是s(秒) || ms(毫秒),注意,第一個時間永遠是運動時間,延遲時間要寫在運動時間後面,例如transition : width 1s 0.5s.
第四個是運動形式:有6種形式;ease:逐漸變慢(預設值)
linear : 勻速
ease-in : 加速
ease-out : 減速
ease-in-out : 先加速後減速
cubic-bezier : 貝塞爾曲線 (x1,y1,x2,y2)數學太渣,不懂這個東西屬性怎麼用,應該也不常用吧~
例如transition : width 0.2s ease-out;