說明您可以用來控制CSS動畫的不同屬性（例如，動畫名稱，動畫 - 武器，動畫 - 觸發功能，動畫

說明您可以用來控制CSS動畫的不同屬性（例如，動畫名稱，動畫 - 武器，動畫 - 觸發功能，動畫 - 題計算，動畫方向，動畫方向，動畫

Mar 26, 2025 pm 07:10 PM

CSS動畫通過各種屬性來控制，每個屬性都定義了動畫的不同方面。這是對這些屬性的詳細說明：

動畫名稱：此屬性指定定義動畫行為的@keyframes At-Lule的名稱。例如， animation-name: fadeIn;將使用@keyframes fadeIn { ... }定義的動畫。
動畫效果：這設置了動畫完成一個週期所花費的時間。它可以在秒或毫秒（MS）中指定。例如， animation-duration: 3s;意味著動畫將持續3秒鐘。
動畫定時功能：此屬性定義了動畫在其持續時間的一個週期中如何進行。共同的值包括ease ， linear ， ease-in ， ease-out和ease-in-out 。此外，您可以使用立方呈現功能來定義自定義計時函數。
動畫題計：這指定了應播放動畫的次數。它可以是一個數字，例如animation-iteration-count: 3; ，或者設置infinite地循環動畫。
動畫方向：此屬性確定動畫是否應在某些或所有周期上反向播放。值包括normal ， reverse ， alternate和alternate-reverse 。
動畫填充模式：這控制執行動畫之前和之後將哪些值應用於目標元素。可能的值none ， forwards ， backwards和both 。 forwards將保留最後一個密鑰幀值，而backwards將在動畫啟動之前應用第一個密鑰幀值。

這些屬性可以單獨或一起使用以獲得複雜的動畫。

CSS中的animation-timing-function屬性使您可以在其持續時間內控制動畫的時間和速度。該屬性定義了動畫的加速曲線，影響了它的啟動程度，進展方式以及如何結束。以下是animation-timing-function的一些共同價值：

ease ：這是默認值。動畫開始緩慢，在中間加速，然後向末端變慢。它由立方晶體函數cubic-bezier(0.25, 0.1, 0.25, 1)表示。
linear ：動畫從頭到尾都以恆定的速度移動。這由cubic-bezier(0, 0, 1, 1)表示。
ease-in ：動畫開始緩慢，然後隨著進展而加快。由cubic-bezier(0.42, 0, 1, 1)代表。
ease-out ：動畫迅速啟動，然後朝末尾放慢。由cubic-bezier(0, 0, 0.58, 1) 。
ease-in-out ：動畫開始緩慢，在中間加速，然後再次向下慢慢。由cubic-bezier(0.42, 0, 0.58, 1)表示。

此外，您可以使用cubic-bezier函數創建自定義的定時函數，該功能將四個數字作為參數，每個數字代表定義動畫曲線的圖表上的點。例如， animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);創建自定義曲線。

使用這些定時功能，您可以微調動畫的速度和時機，以達到所需的視覺效果。

CSS中的animation-direction屬性控制著動畫應播放的方向，尤其是在設置重複時。以下是不同的值如何影響動畫：

normal ：這是默認值。該動畫從一個開始到每個週期結束。如果動畫迭代多次，則每個週期都會向前播放。
reverse ：動畫從末端狀態開始，然後回到開始狀態。每個週期都會向後播放。
alternate ：動畫在正向和反向之間交替。在偶數循環（2、4、6等）上，它向前播放，在奇數週期（1、3、5等）上，它會反向播放。這會產生來源的效果。
alternate-reverse ：類似於alternate ，但是動畫以反向開始。因此，在奇數循環（1、3、5等）上，它反向播放，並且在偶數循環（2、4、6等）上，它向前播放。

從簡單的循環動畫到更複雜的振盪動畫，將這些不同的值用於animation-direction可以產生各種視覺效果。例如，擺的動畫可能會使用alternate來回擺動，而彈跳的動畫可能會使用alternate-reverse來創建逼真的彈跳效果。

animation-fill-mode屬性確定動畫運行之前和之後將哪些樣式應用於元素。這是不同的值及其影響：

none ：這是默認值。動畫在元素啟動之前或結束後對元素沒有影響。動畫完成後，該元素立即恢復為原始狀態。
forwards ：動畫結束後，該元素保留在動畫的最後一個關鍵幀所定義的狀態中。這對於保持動畫的結束狀態可能很有用，例如使元素逐漸消失後可見。
backwards ：在動畫啟動之前，該元素設置為由動畫的第一個密鑰幀定義的狀態。這可以用於在動畫實際開始之前為其準備一個元素，例如設置要在淡出之前隱藏的元素。
both ：這結合了forwards和backwards的影響。該元素使用在動畫啟動並保留動畫結束後的最後一個密鑰幀的樣式之前，使用第一個密鑰幀定義的樣式。