CSS過渡和動畫

一.過渡

1.定義：將CSS的屬性值在一段時間內平緩變化的過程給體現出來；

2.指定過渡屬性

  2.1作用：指定哪個或者哪幾個屬性值，在變化時需要使用過渡效果來體現；

2.2屬性：transition-property取值：屬性名 例子：transition-property:background;

2.3注意：允許設置過渡效果的屬性如下

顏色屬性，取值為數字的屬性，轉換屬性（transform），漸變屬性，陰影屬性，visibility屬性

3.指定過渡時長

  3.1作用：指定在多長時間內完成過渡操作

  3.2 屬性：transition-duration 取值：s/ms

4.指定過渡速度時間函數

  4.1屬性 transition-timing-function

  4.2取值：（1）默認值，ease表示慢速開始快速變化 慢速結束（2）linear勻速（3）ease-in 慢速開始 勻速結束（4）ease-out 快速開始慢速結束（速率與1不同）（5）ease-in-out 慢速開始和結束

5.指定過渡延遲時間 transition-delay:時間

6.過渡的編寫位置

   6.1允許將過渡屬性編寫在元素聲明的樣式中;

   6.2 觸發過渡效果樣式中（hover）

二．動畫

1.定義：使元素從一種樣式逐漸變化為另一種樣式，動畫是復雜的過渡效果。動畫是通過關鍵幀來控制動畫的每一步。

關鍵幀：在某個時間點上，元素的狀態和樣式是怎樣的。

2.動畫的使用步驟：

  2.1聲明動畫：

@keyframes 動畫名稱{

 /* 定義該動畫中所有的關鍵楨*/

0%{動畫開始時的樣式}

100{動畫結束時的樣式}

}

3.動畫屬性

  3.1 animation-name 指定動畫的名稱

  3.2 animation-duration 指定動畫執行的一個周期的時長

  3.3animation-timing-function

  3.4 animation-delay

  3.5animation-iteration-count  作用：指定動畫的播放次數；取值：1.具體數值；2.infinite 無限次

3.6.animation-direction 指定動畫的播放方向；normal 正常播放 alternate輪流播放，偶數次時正向播放，奇數次時逆襲播放

動畫的簡潔寫法：animation: name duration timing-function delay iteration-countdirection

3.7 animation-fill-mode

定義：規定動畫在播放前和播放后的狀態；

取值：3.7.1 none：默認行為 不改變；3.7.2 forwards當動畫完成后，保持在最后一個幀的狀態上；3.7.3 backwards 在動畫播放前的延遲時間內，動畫將保持在第一幀的狀態；3.7.4 both: forwards+backwards

3.8 animation-play-state:指定動畫的播放狀態

取值：pasuse 動畫暫停；running: 動畫播放