本節簡介:講解transition屬性的用法,及制作簡單交互小動畫按鈕。
本節課同學們做的筆記 點擊播放按鈕可自動定位到對應時間進行播放
默認情況下,給元素添加“transition”屬性,那么該元素所有屬性都會發生過度變化;transition:background 0.5s;表示只是背景顏色發生過渡性變化
transition過渡:默認是all所以的 0.5s[0.5秒] 寬、高、背景等[0.5s 2s]兩秒鐘之后執行速度0.5s[第一個是過渡時間,第二個是幾秒鐘之后執行];ease默認彈出速度 ease-in先慢后快 ease-out先塊后慢;linear勻速的;
transition 放在初始屬性添加,不能給hover添加
transition 時間 (過渡時間) 時間(延遲時間,鼠標移入后等待多久開始執行)ese(默認值,一般情況下使用) ease-in(慢速開始,逐漸變快)ease-out(快速開始,后變慢)linear(勻速改變)
transition:屬性(一般不寫就是all)名稱 時間 過渡效果
transition : easy-in加速;easy-out 減速; linear勻速;第一個時間是過渡時間,第二個時間是延遲時間;
ease-in慢速開始,逐漸變快;linear勻速
transition:0.5s;要給初始屬性加,不能加在hover上;
transition:0.5s ease-in;越來越快; linear勻速;transition:0.5s 2s;代表2秒后再進行過渡;
transition:background 0.5s;只對背景使用過渡;