CSS keyframe動(dòng)畫可通過技巧實(shí)現(xiàn)細(xì)膩復(fù)雜效果。1.使用animation-timing-function精細(xì)化節(jié)奏，如前半段ease-in后半段ease-out；2.通過animation-play-state和animation-direction控制播放狀態(tài)，實(shí)現(xiàn)暫停、反向、來回播放；3.用逗號(hào)分隔多層動(dòng)畫疊加，創(chuàng)建組合動(dòng)效；4.結(jié)合JavaScript動(dòng)態(tài)調(diào)整動(dòng)畫參數(shù)，如修改CSS變量改變持續(xù)時(shí)間或方向。掌握這些技巧可提升動(dòng)畫流暢度、可控性和交互性。

CSS keyframe動(dòng)畫雖然基礎(chǔ)，但用好了能做出非常細(xì)膩甚至復(fù)雜的動(dòng)效。很多人停留在寫個(gè)簡單旋轉(zhuǎn)或淡入淡出的階段，其實(shí)通過一些技巧和控制方式，可以讓你的動(dòng)畫更流暢、更可控，甚至實(shí)現(xiàn)動(dòng)態(tài)調(diào)整。

使用 animation-timing-function 精細(xì)化節(jié)奏

關(guān)鍵幀動(dòng)畫默認(rèn)是線性的，但你可以通過 animation-timing-function 來改變每個(gè)關(guān)鍵幀之間的過渡節(jié)奏。比如從 0% 到 50% 用 ease-in，從 50% 到 100% 改成 ease-out，這樣可以讓動(dòng)畫前半段加速，后半段減速。

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

.element {
  animation-name: bounce;
  animation-duration: 2s;
  animation-timing-function: ease-in, ease-out;
}

注意：如果你設(shè)置了多個(gè) timing function，它們會(huì)按順序應(yīng)用到各個(gè)關(guān)鍵幀之間。這種技巧適合做彈跳、緩動(dòng)類效果。

控制動(dòng)畫播放狀態(tài)：暫停、重播與反向播放

有時(shí)候你想讓動(dòng)畫在特定情況下暫?；蛘叩怪シ牛@時(shí)候可以用 animation-play-state 和 animation-direction。

• animation-play-state: paused; 可以暫停正在運(yùn)行的動(dòng)畫。
• animation-direction: reverse; 會(huì)讓動(dòng)畫從終點(diǎn)倒著回到起點(diǎn)。
• alternate 或 alternate-reverse 可以實(shí)現(xiàn)來回播放的效果。

例如，當(dāng)鼠標(biāo)懸停時(shí)暫停動(dòng)畫：

.element {
  animation-play-state: running;
}

.element:hover {
  animation-play-state: paused;
}

這個(gè)方法很適合做交互式動(dòng)畫，比如按鈕 hover 效果、加載中轉(zhuǎn)圈暫停等。

多層動(dòng)畫疊加：用逗號(hào)分隔多個(gè)動(dòng)畫

你可以在一個(gè)元素上同時(shí)應(yīng)用多個(gè) keyframe 動(dòng)畫。只需用逗號(hào)分隔不同的動(dòng)畫名稱，并分別設(shè)置對(duì)應(yīng)的 duration、timing function 和 delay。

.element {
  animation-name: spin, pulse;
  animation-duration: 2s, 1s;
  animation-timing-function: linear, ease-in-out;
  animation-iteration-count: infinite, infinite;
}

上面的例子中，.element 會(huì)同時(shí)進(jìn)行旋轉(zhuǎn)（spin）和縮放脈沖（pulse）兩個(gè)動(dòng)畫。這種方式非常適合創(chuàng)建視覺豐富但結(jié)構(gòu)清晰的動(dòng)效組合，比如 loading 動(dòng)畫中的多個(gè)小球各自運(yùn)動(dòng)。

動(dòng)態(tài)控制動(dòng)畫參數(shù)（配合 JavaScript）

如果你想在運(yùn)行時(shí)動(dòng)態(tài)調(diào)整動(dòng)畫的行為，比如根據(jù)用戶操作來改變持續(xù)時(shí)間、關(guān)鍵幀內(nèi)容或播放方向，可以通過 JavaScript 操作 CSS 變量或直接修改樣式。

一種常見做法是使用 CSS 自定義屬性（變量），然后在 JS 中更改這些值：

.element {
  --duration: 2s;
  animation: move var(--duration) infinite alternate;
}

@keyframes move {
  0%   { transform: translateX(0); }
  100% { transform: translateX(100px); }
}

JS 控制：

document.querySelector('.element').style.setProperty('--duration', '1s');

這樣就可以在不重新定義關(guān)鍵幀的情況下動(dòng)態(tài)調(diào)整動(dòng)畫速度或其他參數(shù)，非常適合用于響應(yīng)式或交互式場(chǎng)景。

基本上就這些。掌握這些技巧之后，你就能寫出更有層次感、互動(dòng)性更強(qiáng)的 CSS 動(dòng)畫了。

以上是高級(jí)CSS密鑰幀動(dòng)畫技術(shù)和控制的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！