Keyframes 用于復(fù)雜動(dòng)畫，Transitions 用于狀態(tài)過渡。1. Keyframes 可定義多階段動(dòng)畫，如 loading 旋轉(zhuǎn)效果，通過 @keyframes 定義并用 animation 應(yīng)用。2. Transitions 實(shí)現(xiàn)屬性平滑變化，如 hover 漸變色，通過 transition 屬性控制。3. 兩者可結(jié)合使用，如按鈕點(diǎn)擊放大或彈跳效果，提升交互自然度。

想讓網(wǎng)頁動(dòng)起來，又不只是簡(jiǎn)單的 hover 效果？CSS 的 keyframes 和 transitions 是你的好幫手。用得好了，能提升用戶體驗(yàn)，還能讓頁面看起來更有活力。

下面我們就從幾個(gè)實(shí)際使用場(chǎng)景出發(fā)，講講怎么用這兩個(gè)功能做出動(dòng)態(tài)效果。

1. 什么是 keyframes 和 transitions？

Keyframes（關(guān)鍵幀）是用來定義動(dòng)畫過程的工具。你可以設(shè)定動(dòng)畫在不同時(shí)間點(diǎn)的狀態(tài)，比如從透明到不透明、從一個(gè)位置移動(dòng)到另一個(gè)位置。

Transitions（過渡）則是讓元素在狀態(tài)變化時(shí)有平滑的效果。比如鼠標(biāo)懸停時(shí)顏色慢慢變深，而不是突然跳過去。

簡(jiǎn)單來說：

• Keyframes 更適合做復(fù)雜動(dòng)畫，比如循環(huán)播放的 loading 動(dòng)畫。
• Transitions 更適合做交互反饋，比如按鈕點(diǎn)擊、hover 效果。

2. 如何使用 keyframes 做出持續(xù)動(dòng)畫？

要?jiǎng)?chuàng)建一個(gè)自定義動(dòng)畫，先用 @keyframes 定義它，然后通過 animation 屬性應(yīng)用到元素上。

舉個(gè)例子：做一個(gè)無限旋轉(zhuǎn)的加載圖標(biāo)

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.loader {
  animation: spin 1s linear infinite;
}

這樣寫出來的動(dòng)畫會(huì)一直轉(zhuǎn)下去，而且速度是勻速的。

一些實(shí)用參數(shù)說明：

• spin：動(dòng)畫名稱
• 1s：動(dòng)畫持續(xù)時(shí)間
• linear：動(dòng)畫速度曲線，線性不變
• infinite：無限循環(huán)

你可以根據(jù)需要調(diào)整這些值，比如改成 ease-in-out 讓動(dòng)畫更柔和。

3. 用 transitions 實(shí)現(xiàn)簡(jiǎn)單的狀態(tài)變化

如果你只是想讓某個(gè)屬性的變化變得平滑，transition 就足夠了。

比如，讓按鈕在 hover 時(shí)顏色漸變：

.button {
  background-color: #3498db;
  transition: background-color 0.3s ease;
}

.button:hover {
  background-color: #2980b9;
}

這里用了三個(gè)參數(shù)：

• 要過渡的屬性（background-color）
• 持續(xù)時(shí)間（0.3秒）
• 時(shí)間函數(shù)（ease）

小技巧：

• 如果你想同時(shí)過渡多個(gè)屬性，可以寫成 transition: all 0.3s ease;，但建議明確寫出具體屬性，避免不必要的性能消耗。
• 不是所有 CSS 屬性都支持過渡，常見的如 opacity、transform、color、background-color 等都可以。

4. 結(jié)合 keyframes 和 transitions 使用更靈活

有時(shí)候我們可以把兩者結(jié)合起來。比如做一個(gè)“彈跳”按鈕，在點(diǎn)擊的時(shí)候放大一點(diǎn)，并帶一點(diǎn)點(diǎn)彈性效果。

.button {
  transition: transform 0.2s ease;
}

.button:active {
  transform: scale(1.1);
}

或者加一個(gè) bounce 動(dòng)畫讓它在特定時(shí)候觸發(fā)：

@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

.bounce-effect {
  animation: bounce 0.5s ease;
}

這類組合常用于提示信息、按鈕反饋等交互場(chǎng)景，能讓用戶感覺更自然。

基本上就這些。關(guān)鍵在于理解什么時(shí)候該用 keyframes，什么時(shí)候用 transitions。一開始可能覺得有點(diǎn)繞，但多練幾次就能順手了。

以上是使用密鑰幀和過渡創(chuàng)建動(dòng)態(tài)CSS動(dòng)畫的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！