7.1 屬性 animation-name
CSS動畫讓你可以創建動態且流暢的視覺效果，提升用戶介面並讓它更具互動性。動畫屬性可以控制動畫的各種方面，比如名稱、持續時間、計時函數和延遲。現在，我們會詳細討論這些屬性，並示範如何使用它們。
屬性 animation-name 定義將要應用於元素的動畫名稱。名稱必須與 @keyframes 中定義的名稱匹配。
語法：
element {
animation-name: animation-name;
}
在哪裡：
animation-name: 在@keyframes中定義的動畫名稱
例子：
CSS
@keyframes moveRight {
from {
transform: translateX(0);
}
to {
transform: translateX(100px);
}
}
.box {
animation-name: moveRight;
}
代碼解釋：
@keyframes moveRight: 定義一個名為moveRight的動畫，它會將元素向右移動.box: 應用了moveRight動畫的元素
7.2 屬性 animation-duration
屬性 animation-duration 定義動畫的持續時間。值以秒 (s) 或毫秒 (ms) 表示。
語法：
element {
animation-duration: time;
}
在哪裡：
time: 動畫持續時間（例如，2s 代表兩秒或 500ms 代表500毫秒）。
例子：
CSS
@keyframes moveRight {
from {
transform: translateX(0);
}
to {
transform: translateX(100px);
}
}
.box {
animation-name: moveRight;
animation-duration: 2s;
}
代碼解釋：
animation-duration: 2s: 設置moveRight動畫的持續時間為2秒
7.3 屬性 animation-timing-function
屬性 animation-timing-function 定義動畫在時間上的速度變化。它可以創建不同的動畫效果，比如加速、減速等。
語法：
element {
animation-timing-function: function;
}
在哪裡：
-
function: 計時函數，定義動畫的速度變化 （例如，ease、linear、ease-in、ease-out、ease-in-out）
例子：
CSS
@keyframes moveRight {
from {
transform: translateX(0);
}
to {
transform: translateX(100px);
}
}
.box {
animation-name: moveRight;
animation-duration: 2s;
animation-timing-function: ease-in-out;
}
代碼解釋：
-
animation-timing-function: ease-in-out: 設置moveRight動畫的計時函數，讓動畫在開始和結束時平滑且慢，中間加速
主要計時函數：
ease: 動畫慢慢開始，加速到中間，然後慢慢結束linear: 動畫從頭到尾以恆定速度進行ease-in: 動畫慢慢開始然後加速ease-out: 動畫快速開始然後減速ease-in-out: 動畫開始和結束時慢，中間加速
7.4 屬性 animation-delay
屬性 animation-delay 定義動畫開始前的延遲時間。值以秒 (s) 或毫秒 (ms) 表示。
語法：
element {
animation-delay: time;
}
在哪裡：
time: 動畫開始前的延遲時間（例如，1s 代表一秒或 500ms 代表500毫秒）
例子：
CSS
@keyframes moveRight {
from {
transform: translateX(0);
}
to {
transform: translateX(100px);
}
}
.box {
animation-name: moveRight;
animation-duration: 2s;
animation-timing-function: ease-in-out;
animation-delay: 1s;
}
代碼解釋：
animation-delay: 1s: 設置moveRight動畫開始前的延遲時間為1秒
GO TO FULL VERSION