前端學習記錄——CSS過渡效果
阿新 • • 發佈:2018-12-10
CSS過渡效果 transition 過渡的三個要素: 1、必須有屬性值發生變化; 2、必須明確哪個屬性值在發生變化; 3、必須制定屬性過渡的持續時長。 transition-property:設定要過渡的屬性,如果需要設定多個屬性,則把各個屬性用逗號隔開即可。 transition-duration:設定過渡的持續時長,如果多個屬性都在過渡,需要為每一個屬性設定對應的時間即可(以逗號分隔)。 transition-delay: 設定過渡的延遲時間執行過渡效果。 transition-timing-function:設定過渡動畫的運動速度
-
transition-timing-function的屬性:
linear 規定以相同速度開始至結束的過渡效果 ease 規定慢速開始,然後變快,然後慢速結束的過渡效果 ease-in 規定以慢速開始的過渡效果 ease-out 規定以慢速結束的過渡效果 ease-in-out 規定以慢速開始和結束的過渡效果 編寫過渡效果的流程: 1、先編寫網頁基本介面,先不要設計過渡; 2、修改應該變化的屬性; 3、對被修改屬性的元素新增過渡效果。