Css學習第十三天
css過渡特效
1、 過渡特效的概述
什麼是過渡特效：一個狀態到緩慢的變化到另一個狀態我們稱之為過渡。
過渡使用流程：
①　給要過渡的元素設定初始狀態
②　設定要過渡的元素設定最終狀態
③　給要過渡的html標籤設定過渡屬性

2、 執行變換的屬性transition-property(none all name指定一個或者多個屬性名稱列表，以逗號進行分隔，當指定屬性產生變化是，為其執行指定屬性的動畫過渡效果
3、 過渡執行的時間transition-duration
4、 過渡時間的曲線transition-timing-function（ease預設值逐漸減速 linear ：勻速ease-in：加速 ease-out ：減速 ease-in-out：先加速再減速）提示：通過cubicbezier[引數]設定貝塞爾曲線也能做到時間曲線的控制。
5、 過渡延遲 transition-delay
6、 綜合值：和其它大多數CSS樣式設定屬性一樣，transition屬性也支援多值組合的寫法，而且也是實際開發中最為常用的寫法，能大大地節約程式碼量。
但在編寫該屬性的時候要注意允許過渡的屬性一般只寫成all或者單個屬性名，如果寫成由逗號分隔的屬性集合，如果寫出以逗號分隔的屬性集合，那麼就只會使用最後一個屬性為執行過過渡的屬性。
二、CSS動畫
1、什麼是CSS動畫：
在css中執行動畫屬性css3屬性中的animation該屬性可以讓元素隨著時間的推移。產生“位置” “形狀” “顏色 ” “大小” “透明度”等屬性的變化。
2、css動畫和css過渡的區別：動畫可以不需要任何事件的啟用（當然也可以通過事件啟用）讓元素本身就“掛載”一系列的CSS屬性變化，即一初始化就開始執行動畫
動畫可以單獨地存在並被不同的標籤元素呼叫。
預設動畫返回時是一瞬間完成，而不像過渡一樣緩慢的還原。【除非讓動畫的終止狀態為初始狀態的樣式】
動畫能夠“無限次”地執行動畫
3、CSS動畫的屬性
1）、動畫名稱與執行時間 animation-name/animation-
2）、動畫的時間曲線：animation-timing-function
3)、動畫的時間延遲animation-delay
4）、動畫的播放次數 animation-iteration-count
5）、動畫的週期逆向播放 animation-direction注意：動畫的逆向播放也算一次動畫
6）、動畫的播放和暫停：animation-play-state（running播放動畫 paused暫停動畫）
7）設定元素的動畫形態 animation-fill-mode（backwards、）