animation-direction

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

animation-direction は CSS のプロパティで、アニメーション再生の向きを順方向、逆方向、前後反転のいずれにするかを設定します。

試してみましょう

animation-direction: normal;

animation-direction: reverse;

animation-direction: alternate;

animation-direction: alternate-reverse;

<section class="flex-column" id="default-example"> <div id="example-element"></div> <button id="play-pause">再生</button> </section>

#example-element { animation-duration: 3s; animation-iteration-count: infinite; animation-name: slide; animation-play-state: paused; animation-timing-function: ease-in; background-color: #1766aa; border-radius: 50%; border: 5px solid #333; color: white; height: 150px; margin: auto; margin-left: 0; width: 150px; } #example-element.running { animation-play-state: running; } #play-pause { font-size: 2rem; } @keyframes slide { from { background-color: orange; color: black; margin-left: 0; } to { background-color: orange; color: black; margin-left: 80%; } }

"use strict"; window.addEventListener("load", () => { const el = document.getElementById("example-element"); const button = document.getElementById("play-pause"); button.addEventListener("click", () => { if (el.classList.contains("running")) { el.classList.remove("running"); button.textContent = "再生"; } else { el.classList.add("running"); button.textContent = "一時停止"; } }); });

アニメーションのプロパティすべてを一度に設定するには、一括指定プロパティである animation プロパティを使用すると便利です。

構文

css

/* 単一のアニメーション */ animation-direction: normal; animation-direction: reverse; animation-direction: alternate; animation-direction: alternate-reverse; /* 複数のアニメーション */ animation-direction: normal, reverse; animation-direction: alternate, reverse, normal; /* グローバル値 */ animation-direction: inherit; animation-direction: initial; animation-direction: revert; animation-direction: revert-layer; animation-direction: unset;

値

normal: アニメーションを毎回順方向に再生します。言い換えれば、アニメーション周期ごとに、アニメーションを最初の状態にリセットしてそこからまた始めます。これが既定値です。
reverse: アニメーションを毎回逆方向に再生します。言い換えれば、アニメーション周期ごとに、アニメーションを最後の状態にリセットしてそこからまた始めます。アニメーションを逆方向に実行し、イージング関数も逆になります。例えば、イージング関数の ease-in が ease-out になります。
alternate: アニメーションを毎回反転させ、初回は順方向になります。周期が偶数か奇数かを特定する回数は1から始まります。
alternate-reverse: アニメーションを毎回反転させ、初回は逆方向になります。周期が偶数か奇数かを特定する回数は1から始まります。

メモ: animation-* プロパティにカンマ区切りで複数の値を指定した場合、 animation-name に現れる順にアニメーションに適用されます。アニメーションの数と animation-* プロパティの値が一致しない場合は、複数のアニメーションプロパティ値の設定を参照してください。

メモ: CSS スクロール駆動アニメーションを作成するとき、 animation-direction を指定すると期待通りに動作します。例えば、 reverse を指定すると、タイムラインの進行の過程でアニメーションが逆に実行されます。 alternate の値（animation-iteration-count との組み合わせ）を指定すると、タイムラインの進行に合わせてアニメーションを前後に実行させます。

公式定義

初期値	`normal`
適用対象	すべての要素、`::before` / `::after` 擬似要素
継承	なし
計算値	指定通り
アニメーションの種類	アニメーション不可

形式文法

animation-direction = 
 <single-animation-direction># 

<single-animation-direction> = 
 normal |
 reverse |
 alternate |
 alternate-reverse

例

逆方向に実行されるアニメーション

HTML

html

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

CSS

css

.box { background-color: rebeccapurple; border-radius: 10px; width: 100px; height: 100px; } .box:hover { animation-name: rotate; animation-duration: 0.7s; animation-direction: reverse; } @keyframes rotate { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } }

結果

例については CSS アニメーションを参照してください。

仕様書

Specification
CSS Animations Level 1 # animation-direction