CSS的動畫的基礎概念定義/呼叫/繫結複習必備

Css動畫

首先，我們要了解的是過渡和動畫區別，這樣可以讓我們更深入了了解動畫：
過渡：需要觸發一個事件才可以執行。
動畫：可以不用觸發事件直接呼叫。
言歸正傳，接下來我們就一起進入動畫屬性:

Css動畫的定義：
基礎語法如下：
可是這種基礎語法有一定的侷限性，只能定義開頭和解為的動畫，實際操作中我們一般這樣用：

ps：圖中花括號內的分別為定位的變化和背景顏色的變化。
這種方式定義動畫表示每個百分比之間的樣式變化，上圖內每個百分比區間為一定事件內動畫的百分佔比，如果動畫總時長為10s，那麼10%既為1s。
這種方法定義的動畫精度更高，邏輯簡單，層次感鮮明。

動畫的呼叫

動畫建立完成之後，自然需要被元素呼叫，呼叫語法：
animation：①被繫結的動畫名稱 ②動畫的播放時間 ③動畫播放的次數 ④動畫的速度曲線 ⑤動畫的延遲開始時間

下面一一對應說明：

①被繫結的動畫名稱 ：你自己設定的動畫名稱 必要屬性

②動畫的播放時間：動畫從開始到結束的時間（動畫總時長）必要屬性

③動畫播放的次數：infinite-無限迴圈播放 alternate(2)-規定次數播放，alternate(2)表示播放兩次 非必要屬性預設值為1次

④動畫的速度曲線:：
linear 勻速
ease-in 慢速開始，快速結束
ease-out 快速開始慢速結束
ease-in-out 慢速-快速-慢速
非必要屬性 預設值為ease
⑤動畫的延遲開始時間：動畫被呼叫後多久開始動畫 非必要屬性
補充：動畫結束後會回覆原來的樣式，如果想讓動畫停留在結束時刻的樣式可用forward屬性。

如上圖，是給 類h-img 繫結動畫，繫結動畫名稱為hdpp 動畫持續時間為12s 動畫無限迴圈播放。

好了，今天就到這裡了，如有準備複習的重要知識點，可在評論區留言哦~