關於動畫.我們學習分為三大點:

​ 一.過渡動畫.即 2 d 變換

所謂過渡動畫，就是從初始狀態過渡到結束狀態這個過程中所產生的動畫。

​ 過渡(transition)本身需要定義引數.否則,看不到效果.我們學到的可定義的引數有以下幾點:

​ transition-property：規定對哪個屬性進行過渡。

​ transition-duration：定義過渡的時間，預設是0。

​ transition-timing-function：定義過渡動畫的緩動效果，如淡入、淡出等。

​ linear 規定以相同速度開始至結束的過渡效果。

​ ease（預設值）規定慢速開始，然後變快，然後慢速結束的過渡效果。

​ ease-in 規定以慢速開始的過渡效果。

​ ease-out 規定以慢速結束的過渡效果。

​ ease-in-out 規定以慢速開始和結束的過渡效果

​ transition-delay：規定過渡效果的延遲時間，即在過了這個時間後才開始動畫，預設是0。

​

transform(變形) (2 d中新學到的幾個屬性)

​ 1)縮放變換transform：scale（水平，垂直）

*取值：表示倍數

*變換的基準點在元素中間

*scale-x,scale-y變換不同的軸

​ 2)旋轉變換 transform：rotate（角度deg）

*順時針為正方向

*旋轉的基準點在元素的中心

*可以取負數

​ 3)偏移變換transform：skew(x軸偏移角度，y軸偏移角度)

*transform： skew X x軸偏移以逆時針為正

*transform： skew Y y軸偏移以順時針為正

​ 4)變換的基準點transition-origin:水平方向 垂直方向

*數值，百分比

*方位

​ 要想改變元素原有的狀態,課堂上老師主要介紹了以上四種方式.當然也還有大小、位置、顏色等屬性.

​ 在改變狀態以後,要想動畫能以一種更加舒適的方式去平滑過渡,需要給被改變狀態的元素新增過渡()transition)屬性.然後還需要給元素定義一個類,也就是需要使用者的行為去觸發.我們最常用hover的方式去觸發.除此之外,還有focus,checked媒體查詢等觸發方式.

​ 過渡動畫讓頁面更加的人性化,大大提升了使用者的體驗,但是,也有它的缺點,就是需要人為的去觸發,所以沒辦法在網頁載入的時候自動發生,而且它是一次性的.沒辦法重複,最後,它只有兩個狀態,也就是開始狀態和結束狀態,我們無法給它定義中間的狀態.因此.就有了接下來的關鍵幀動畫.

​ 二.關鍵幀動畫.

​ 關鍵幀動畫的出現,完美的解決了上述過渡動畫的缺點,它既可以定義動畫自動發生,也可以無限重複,以及我們可以定義它中間過渡的狀態.

​ 要實現關鍵幀動畫,我把它分為4個步驟 : 1.通過@keyframs自定義動畫 2.通過百分比將動畫序列分割成多個節點 3.在各節點中分別定義各屬性 4.通過animation將動畫應用於相應的元素

​ 這裡有兩個新的屬性, @keyframes(關鍵字) 以及 animation(動畫)

​ @keyframes的格式為:@keyframes 動畫名稱 { 時間點 {元素狀態} 時間點 {元素狀態} …}

​ animation屬性類似於transition，他們都是隨著時間變化而改變元素的屬性值，其主要區別在於：transition需要觸發一個事件才會隨著時間改變其CSS屬性；animation在不需要觸發任何事件的情況下，也可以顯式的隨時間變化來改變元素CSS屬性，達到一種動畫的效果。

同樣的,animation也有對應引數,我們主要學習了以下幾點:

​ animation-duration：預設值為0s，意味著動畫週期為0s，也就是沒有任何動畫效果。

​ animation-timing-function：與transition-timing-function一樣。

​ animation-delay：在開始執行動畫時需要等待的時間。

​ animation-iteration-count：定義動畫的播放次數，預設為1，如果為infinite，則無限次迴圈播放。

​ animation-direction：預設為nomal，每次迴圈都是向前播放，（0-100）。另一個值為alternate，動畫播放為偶數次則向前播放，如果為基數詞就反方向播放。

​ animation-state：預設為running，播放，paused，暫停。

​ 三.3 D變換.

3d變換,在某種程度上,我理解為,相較於2 d變換屬性,多了一個Z軸的方向.它可以給使用者一種立體的感覺.讓動畫看起來更加的真實.它同樣需要設定一些樣式.

比如:transform-style:【flat（預設平面） preserve-3 d保持3 d變換】。

perspective：設定觀察的距離,景深.設定值越大，站的位置越遠。

如果要實現3 d變換,這兩個樣式需要同時寫,而且都是作用在父元素身上,最後如果想要看到效果,父元素也需要有變換,否則,我們是看不到效果的.

三種方式,各有各的優點.主要是看我們想要一種什麼樣的效果.然後再去選擇用哪種方式去實現.