animation-direction 屬性用于控制 css 動畫的播放方向，其常用值包括 normal、reverse、alternate 和 alternate-reverse。1. normal 為默認值，動畫始終正向播放；2. reverse 讓動畫始終反向播放；3. alternate 在奇數(shù)次正播、偶數(shù)次倒播，形成來回效果；4. alternate-reverse 則首次播放即為反向。該屬性常用于實現(xiàn)循環(huán)動畫中的方向變化，如來回移動的提示框或加載動畫。使用時需配合 animation-name、animation-duration 及 animation-iteration-count 等屬性，才能完整定義動畫行為。
在 html 和 css 中，動畫的方向控制主要靠 animation-direction 屬性。這個屬性決定了動畫是否應(yīng)該反向播放、來回循環(huán)還是正常播放一次。它雖然不是設(shè)置動畫的全部，但對控制動畫節(jié)奏和表現(xiàn)效果非常有用。
一、animation-direction 的基本用法
animation-direction 是一個用于 CSS 動畫的屬性，通常配合 @keyframes 使用。它的作用是告訴瀏覽器動畫應(yīng)該如何播放——是正著來、倒著來，還是來回切換。
你可以把它加在設(shè)置了動畫的元素上，比如這樣：
立即學習“前端免費學習筆記（深入）”；
.box { animation-name: slide; animation-duration: 2s; animation-direction: alternate; }
上面的例子中，.box 元素會使用名為 slide 的關(guān)鍵幀動畫，并以“交替”的方式播放，也就是正播一遍、倒播一遍地循環(huán)。
二、animation-direction 的可選值有哪些？
這個屬性有幾個常用取值，分別對應(yīng)不同的播放方向行為：
- normal：默認值，動畫始終按正向播放。
- reverse：動畫始終按反向播放（從終點到起點）。
- alternate：動畫在奇數(shù)次正向播放，在偶數(shù)次反向播放。
- alternate-reverse：跟 alternate 類似，但第一次是反向播放。
舉個例子，如果你設(shè)了 animation-iteration-count: infinite（無限循環(huán)），并且用了 alternate，那么動畫就會像來回滑動一樣不斷切換方向。
三、什么時候該用 animation-direction？
這個屬性最適合用于需要重復播放、又不想讓動畫看起來單調(diào)的情況。例如：
- 制作一個來回移動的提示框；
- 實現(xiàn)一個自動切換方向的加載動畫；
- 讓圖標在懸停時有更豐富的動態(tài)反饋。
假設(shè)你想做一個左右來回晃動的按鈕，可以這樣寫：
@keyframes shake { 0% { transform: translateX(0); } 50% { transform: translateX(10px); } 100% { transform: translateX(-10px); } } .button { animation: shake 0.5s ease-in-out infinite alternate; }
這樣按鈕會在左右之間來回晃動，視覺上更有動感。
四、注意點：別忘了其他動畫屬性的配合
單獨使用 animation-direction 并不能讓動畫跑起來，你至少還要設(shè)置：
- animation-name：指定關(guān)鍵幀名稱；
- animation-duration：設(shè)定動畫持續(xù)時間；
- animation-iteration-count：如果想循環(huán)播放，得設(shè)為 infinite 或具體次數(shù)。
另外，如果你希望動畫在不同方向播放時有不同的緩動效果，可以用 animation-timing-function 來微調(diào)。
基本上就這些。合理使用 animation-direction 可以讓你的網(wǎng)頁動畫更有層次感，也不需要太復雜的代碼。
