アニメーション - CSSリファレンス

#animation-delay

アニメーションが開始するまでの待機時間を定義します。アニメーションは最初の繰り返しでのみ遅延されます。

デフォルト animation-delay: 0s;

アニメーションは0秒待機し、すぐに開始します。

animation-delay: 1.2s;

sキーワードを使用して、秒単位で小数値を使用できます。

animation-delay: 2400ms;

msキーワードを使用して、秒の代わりにミリ秒を使用できます。

animation-delay: -500ms;

負の値を使用できます。アニメーションは、500ms間すでに再生されていたかのように開始します。

#animation-direction

アニメーションの再生方向を定義します。

デフォルト animation-direction: normal;

アニメーションは順方向に再生されます。終了すると、最初のキーフレームから再開します。

animation-direction: reverse;

アニメーションは逆方向に再生されます。最後のキーフレームから始まり、最初のキーフレームで終了します。

animation-direction: alternate;

アニメーションは最初に順方向に、次に逆方向に再生されます。

最初のキーフレームから開始
最後のキーフレームで停止
再開しますが、最後のキーフレームから
最初のキーフレームで停止

animation-direction: alternate-reverse;

アニメーションは最初に逆方向に、次に順方向に再生されます。

最後のキーフレームから開始
最初のキーフレームで停止
再開しますが、最初のキーフレームから
最後のキーフレームで停止

#animation-duration

アニメーションの長さを定義します。

デフォルト animation-duration: 0s;

デフォルト値は0秒です。アニメーションは再生されません。

animation-duration: 1.2s;

sキーワードを使用して、秒単位で小数値を使用できます。

animation-duration: 2400ms;

msキーワードを使用して、秒の代わりにミリ秒を使用できます。

#animation-fill-mode

アニメーションの開始前と終了後に何が起こるかを定義します。fill modeを使用すると、アニメーションのスタイルをアニメーションの外側にも適用するかどうかをブラウザに指示できます。

デフォルト animation-fill-mode: none;

アニメーションスタイルはデフォルトスタイルに影響しません。要素はアニメーション開始前にデフォルト状態に設定され、アニメーション終了後もそのデフォルト状態に戻ります。

animation-fill-mode: forwards;

アニメーション終了時に適用された最後のスタイルがその後も保持されます。

animation-fill-mode: backwards;

アニメーションが実際に開始する前に、アニメーションのスタイルが既に適用されます。

animation-fill-mode: both;

スタイルはアニメーションの再生前と後に適用されます。

#animation-iteration-count

アニメーションの再生回数を定義します。

デフォルト animation-iteration-count: 1;

アニメーションは1回だけ再生されます。

animation-iteration-count: 2;

整数値を使用して、アニメーションの再生回数を具体的に定義できます。

animation-iteration-count: infinite;

infiniteキーワードを使用すると、アニメーションは無限に再生されます。

#animation-name

使用するアニメーションキーフレームを定義します。

デフォルト animation-name: none;

アニメーション名を指定しない場合、アニメーションは再生されません。

animation-name: fadeIn;

名前を指定すると、その名前に一致する**keyframes**が使用されます。

例えば、fadeInアニメーションは次のようになります。

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

animation-name: moveRight;

別の例：moveRightアニメーション

@keyframes moveRight {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100px);
  }
}

#animation-play-state

アニメーションが再生中かどうかを定義します。

デフォルト animation-play-state: running;

animation-durationとanimation-nameが定義されている場合、アニメーションは自動的に再生を開始します。

animation-play-state: paused;

アニメーションは**最初のキーフレーム**で一時停止されます。

これは、animation-durationまたはanimation-nameのいずれも定義されていない場合とは異なります。アニメーションが一時停止されている場合、適用されるスタイルは最初のキーフレームのスタイルであり、**デフォルトスタイルではありません**。

この例では、正方形はデフォルトで表示されますが、fadeAndMoveの最初のキーフレームでは、opacityが0に設定されています。一時停止すると、アニメーションはこの最初のキーフレームに「固着」し、非表示になります。

@keyframes fadeAndMove {
  from {
    opacity: 0;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(100px);
  }
}

#animation-timing-function

アニメーションの開始と終了の間の値の計算方法を定義します。

デフォルト animation-timing-function: ease;

アニメーションはゆっくりと始まり、途中で加速し、最後に減速します。

animation-timing-function: ease-in;

アニメーションはゆっくりと始まり、徐々に加速して終了します。

animation-timing-function: ease-out;

アニメーションは速く始まり、徐々に減速して終了します。

animation-timing-function: ease-in-out;

easeに似ていますが、より顕著です。

アニメーションは速く始まり、徐々に減速して終了します。

animation-timing-function: linear;

アニメーションは**一定の速度**です。

animation-timing-function: step-start;

アニメーションは**最終状態**に**瞬時に**ジャンプします。

animation-timing-function: step-end;

アニメーションは終了時まで**初期状態**を維持し、**最終状態**に**瞬時に**ジャンプします。

animation-timing-function: steps(4, end);

**整数**でsteps()を使用することにより、終了するまでのステップ数を指定できます。要素の状態は徐々に変化するのではなく、別々の瞬間に状態から状態へ**ジャンプ**します。

#animation

animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-fill-mode および animation-play-state の省略記法プロパティです。

animation-durationとanimation-nameのみが**必須**です。