プロパティ animation-direction

プロパティ animation-direction は、アニメーションの再生方向を指定します。デフォルトでは、アニメーションは 1 回のみ繰り返され、その後最初の状態に戻り、もし遅延 animation-delay が設定されていれば、指定された時間待機してからサイクルが最初から開始されます。

このプロパティを使用すると、この動作を変更できます。例えば、アニメーション終了後に最初の位置にジャンプせず、終了した場所に留まるように設定することができます。

また、アニメーションが極点に達した後に元に戻る動作（transition のように）を設定することも可能です。以下の説明を参照してください。

構文

cssセレクター {
  animation-direction: normal | reverse | alternate | alternate-reverse;
}

値

デフォルト値: normal。

例

ここでは、値 alternate が設定されているため、要素は一方に移動した後、元の位置に戻ります。animation-duration は 3 秒に設定されており、これは「往き」と「戻り」の移動がそれぞれ 3 秒間続くことを意味します：

html<div id="elem"></div>

css@keyframes move {
  from {
    margin-left: 0;
  }
  to {
    margin-left: 400px;
  }
}

#elem {
  animation-direction: alternate;
  animation-duration: 3s;
  animation-name: move;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  border: 1px solid black;
  width: 50px;
  height: 50px;
}

Результат:

例

ここでは、要素が逆方向に移動します（左から右ではなく、右から左へ）：

html<div id="elem"></div>

css@keyframes move {
  from {
    margin-left: 0;
  }
  to {
    margin-left: 400px;
  }
}
      
#elem {
  animation-direction: reverse;
  animation-duration: 3s;
  animation-name: move;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  border: 1px solid black;
  width: 50px;
  height: 50px;
}

Результат:

例

ここでは、要素が前後に移動しますが、逆方向から開始します（左から開始する代わりに右から開始します）：

html<div id="elem"></div>

css@keyframes move {
  from {
    margin-left: 0;
  }
  to {
    margin-left: 400px;
  }
}

#elem {
  animation-direction: alternate-reverse;
  animation-duration: 3s;
  animation-name: move;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  border: 1px solid black;
  width: 50px;
  height: 50px;
}

Результат:

関連項目