1. 程式人生 > >前端學習記錄——CSS過渡效果

前端學習記錄——CSS過渡效果

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、對被修改屬性的元素新增過渡效果。