Webサイト制作をもっと楽しく！CSSアニメーションのanimation-durationプロパティで遊んでみよう

animation-durationプロパティは、CSSアニメーションの再生時間を設定します。これは、アニメーションが完了するまでにかかる時間を秒単位で指定します。

文法

animation-duration: <秒数>;

例

animation-duration: 2s; /* アニメーションが2秒間実行される */

デフォルト値

animation-durationプロパティのデフォルト値は0秒です。つまり、デフォルトではアニメーションは再生されません。

使用例

以下の例では、要素を1秒かけて右から左へ移動するアニメーションを作成します。

.example {
  animation-name: slide-in;
  animation-duration: 1s;
}

@keyframes slide-in {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

animation-durationプロパティには、以下の値も指定できます。

• normal: ブラウザのデフォルトの再生速度を使用します。
• alternate: アニメーションを交互に再生します。

• アニメーションを滑らかにするには、animation-timing-functionプロパティを使用します。
• アニメーションの再生速度を調整するには、animation-durationプロパティだけでなく、animation-delayやanimation-iteration-countなどのプロパティも併用する必要があります。

---

フェードイン

この例では、要素を0.5秒かけてフェードインするアニメーションを作成します。

.fadeIn {
  animation-name: fadeIn;
  animation-duration: 0.5s;
  animation-fill-mode: both;
}

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

フェードアウト

.fadeOut {
  animation-name: fadeOut;
  animation-duration: 0.5s;
  animation-fill-mode: both;
}

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

スライドイン

この例では、要素を1秒かけて右から左へスライドインするアニメーションを作成します。

.slideIn {
  animation-name: slideIn;
  animation-duration: 1s;
  animation-fill-mode: both;
}

@keyframes slideIn {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

スライドアウト

この例では、要素を1秒かけて左から右へスライドアウトするアニメーションを作成します。

.slideOut {
  animation-name: slideOut;
  animation-duration: 1s;
  animation-fill-mode: both;
}

@keyframes slideOut {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100%);
  }
}

回転

この例では、要素を1秒かけて360度回転するアニメーションを作成します。

.rotate {
  animation-name: rotate;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

---

animation-delayプロパティ

animation-delayプロパティは、アニメーションの開始タイミングを遅らせるために使用します。値を秒単位で指定することで、アニメーションが開始されるまでの時間を設定できます。

animation-delay: 2s; /* アニメーションが2秒間遅れて開始される */

このプロパティを使用することで、アニメーションの全体的な再生時間を間接的に調整することができます。例えば、animation-durationを2秒に設定し、animation-delayを1秒に設定すると、アニメーションは3秒後に開始され、2秒間再生されます。

animation-iteration-countプロパティ

animation-iteration-countプロパティは、アニメーションの繰り返し回数を設定します。値を整数で指定することで、アニメーションが繰り返される回数を設定できます。

animation-iteration-count: 3; /* アニメーションが3回繰り返される */

このプロパティを使用することで、アニメーションの再生時間を短縮することができます。例えば、animation-durationを2秒に設定し、animation-iteration-countを0.5に設定すると、アニメーションは1秒間再生されます。

transition-durationプロパティ

transition-durationプロパティは、要素の状態が変化する際のアニメーション時間を設定します。これは、CSSトランジションと呼ばれる機能の一部であり、animation-durationプロパティとは異なり、キーフレームアニメーションではなく、要素のプロパティの単純な変化をアニメーション化します。

transition-duration: 2s; /* 要素の状態変化が2秒間かけてアニメーション化される */

このプロパティを使用することで、シンプルなアニメーションを簡単に実装することができます。ただし、animation-durationプロパティのように、複雑なアニメーションを作成することはできません。

上記以外にも、JavaScriptやアニメーションライブラリを使用して、アニメーションの再生時間や速度を制御する方法があります。しかし、これらの方法は、CSSアニメーションよりも複雑で、習得に時間がかかる場合があります。

animation-durationプロパティは、CSSアニメーションの再生時間を設定するための最も基本的な方法です。代替手段として、animation-delayプロパティ、animation-iteration-countプロパティ、transition-durationプロパティなどを組み合わせて使用することができます。

最適な方法は、作成したいアニメーションの複雑さや要件によって異なります。

以下に、それぞれの代替手段の要約と、いつ使用するべきかのガイダンスを示します。

• JavaScriptまたはアニメーションライブラリ
  複雑なアニメーションを作成したい場合に使用する。
• transition-durationプロパティ
  シンプルなアニメーションを簡単に実装したい場合に使用する。
• animation-iteration-countプロパティ
  アニメーションの再生回数を減らしたい場合に使用する。
• animation-delayプロパティ
  アニメーションの開始タイミングを遅らせたい場合に使用する。