この記事の要点

animation-direction は アニメーションの再生方向を決める CSS プロパティ 値は normal（正方向）/ reverse（逆方向）/ alternate（往復）/ alternate-reverse（逆スタートで往復）の 4 種類 animation-iteration-count: infinite と組み合わせると往復ループが作れる 初期値は normal。@keyframes 自体は方向を持たず、direction で再生時に向きを決めるのがポイント カンマ区切りで複数アニメーションそれぞれに方向を指定できる

animation-direction とは

animation-direction は CSS の アニメーション プロパティ群の 1 つで、CSS アニメーションの再生方向を制御します。@keyframes で定義したキーフレーム列を、そのまま流すのか、逆向きに流すのか、往復させるのか、を 1 つのプロパティで切り替えられます。

構文

.box {
  animation-name: slide;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;   /* ← ここ */
}

ショートハンド animation でまとめて書く場合は次の通り。direction は他のプロパティ値と区別可能な値（キーワード）なので、順番は柔軟です。

.box {
  animation: slide 2s infinite alternate;
}

値（プロパティの取りうる値）

値	意味	1ループの流れ（@keyframes が 0% → 100% の場合）
normal	正方向に再生（初期値）	0% → 100%、0% → 100%、…
reverse	逆方向に再生	100% → 0%、100% → 0%、…
alternate	1 回ごとに方向を反転（往復）	0% → 100% → 0% → 100% → 0% …
alternate-reverse	最初に逆方向で開始し、以後反転	100% → 0% → 100% → 0% …

具体例: 横スライド

左右に往復するシンプルな例です。animation-iteration-count: infinite と alternate を組み合わせるのが、もっとも頻出のパターンです。

<div class="box"></div>

<style>
.box {
  width: 60px;
  height: 60px;
  background: #4f8cff;

  animation-name: slide;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
}

@keyframes slide {
  from { transform: translateX(0); }
  to   { transform: translateX(200px); }
}
</style>

上の例で animation-direction を切り替えると、見え方は次のように変わります。

direction	見え方
normal	左から右に動き、瞬間的に左に戻ってまた右へ（パッと戻る挙動）
reverse	右から左に動き、瞬間的に右に戻る
alternate	左 → 右 → 左 → 右 ... なめらかな往復
alternate-reverse	右 → 左 → 右 → 左 ... 反対端からスタートの往復

複数アニメーションへの個別指定

1 つの要素に複数のアニメーションを設定している場合、animation-name と同じ順番にカンマ区切りで方向を並べると、それぞれ別の方向で再生できます。

.box {
  animation-name: slide, fade;
  animation-duration: 2s, 3s;
  animation-iteration-count: infinite, infinite;
  animation-direction: alternate, reverse;
}

timing-function との関係

animation-direction は進行方向のみを変えるプロパティで、animation-timing-function（イージング）は各ループ内の速度カーブを決めます。reverse の場合、ease-in は再生されるとき「終端側ほど速い」見え方になるため、往復モーションを作るときは alternate + ease-in-out がもっとも自然な動きになります。

fill-mode との関係

アニメーション開始前 / 終了後にどの状態を保持するかは animation-fill-mode で別途決まります。reverse や alternate-reverse を使うとき、停止後の見え方が直感に反することがあるので、停止状態を固定したい場合は animation-fill-mode: both も併用するのが安全です。

ブラウザ対応とベンダープレフィックス

現代の主要ブラウザ（Chrome / Edge / Firefox / Safari）は animation-direction をプレフィックス無しでサポートしています。古い Safari / iOS Safari 互換が必要な場合のみ -webkit-animation-direction を追加します。

よくある勘違い

• animation-direction は @keyframes 内では指定できない。あくまで「再生方向」を要素側で決める
• alternate は奇数回が正方向、偶数回が逆方向。animation-iteration-count が 1 だと反転は起こらず正方向のみ
• direction（書字方向）プロパティとは無関係。プロパティ名が紛らわしいので注意

JavaScript からの動的切り替え

UI の状態に合わせて方向を切り替えたい場合は、JavaScript からインラインスタイルや CSS 変数で操作するのが定番です。

.box {
  --dir: normal;
  animation: slide 2s infinite var(--dir);
}

const box = document.querySelector('.box');
document.getElementById('toggle').addEventListener('click', () => {
  const cur = getComputedStyle(box).getPropertyValue('--dir').trim();
  box.style.setProperty('--dir', cur === 'normal' ? 'reverse' : 'normal');
});

CSS 変数を切り替えるとアニメーションは再起動されないので、現在のフレーム位置からシームレスに方向が切り替わって見えます（厳密にはブラウザ実装に依存）。

prefers-reduced-motion との組み合わせ

アクセシビリティの観点から、ユーザが「動きを減らす」設定にしている場合はアニメーションを止めるのが推奨です。

@media (prefers-reduced-motion: reduce) {
  .box {
    animation: none;
  }
}

関連

• アニメーション — 親カテゴリ
• CSS — CSS 全般
• プロパティ — CSS プロパティの索引