CSSアニメーションの基礎：animation-duration プロパティで動きをデザインしよう

CSSアニメーションの持続時間：animation-duration プロパティ

使い方

.element {
  animation: my-animation 2s ease-in-out;
}

@keyframes my-animation {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

上記例では、element クラスに 2 秒間のアニメーション my-animation を適用しています。

プロパティの詳細

• 値
  • 時間：s または ms 単位で指定できます。例：2s、1000ms
  • infinite：アニメーションを無限に繰り返します。
• 初期値
  • 0s：アニメーションは発生しません。
• 継承
  • いいえ
• 適用対象
  • すべての要素

補足

• animation-duration は、@keyframes ルールと組み合わせて使用します。
• アニメーションのタイミング関数は、animation-timing-function プロパティで設定できます。
• アニメーションの開始タイミングは、animation-delay プロパティで設定できます。
• アニメーションの繰り返し回数は、animation-iteration-count プロパティで設定できます。

• アニメーションの速度は、animation-duration と animation-timing-function プロパティの組み合わせで調整できます。
• アニメーションをより複雑にするには、複数の @keyframes ルールを組み合わせることができます。

例

• 画面にフェードインする要素：

.element {
  animation: fade-in 2s ease-in;
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

• 要素を左右に移動するアニメーション：

.element {
  animation: move-左右 2s linear infinite;
}

@keyframes move-左右 {
  0% {
    left: 0;
  }
  50% {
    left: 50%;
  }
  100% {
    left: 0;
  }
}

animation-duration プロパティは、CSSアニメーションの持続時間を設定する重要なプロパティです。このプロパティを使いこなすことで、さまざまなアニメーションを作成することができます。

CSSアニメーションの持続時間（animation-duration）サンプルコード

.fade-in {
  animation: fade-in 2s ease-in;
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.fade-out {
  animation: fade-out 2s ease-out;
}

@keyframes fade-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

上下左右に移動するアニメーション

.move-up-down {
  animation: move-up-down 2s linear infinite;
}

@keyframes move-up-down {
  0% {
    top: 0;
  }
  50% {
    top: 50%;
  }
  100% {
    top: 0;
  }
}

.move-left-right {
  animation: move-left-right 2s linear infinite;
}

@keyframes move-left-right {
  0% {
    left: 0;
  }
  50% {
    left: 50%;
  }
  100% {
    left: 0;
  }
}

回転アニメーション

.rotate {
  animation: rotate 2s linear infinite;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

拡大・縮小アニメーション

.scale-up {
  animation: scale-up 2s ease-in-out;
}

@keyframes scale-up {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}

.scale-down {
  animation: scale-down 2s ease-in-out;
}

@keyframes scale-down {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}

複雑なアニメーション

.complex-animation {
  animation: complex-animation 4s linear infinite;
}

@keyframes complex-animation {
  0% {
    opacity: 0;
    transform: scale(0) rotate(0deg);
  }
  25% {
    opacity: 1;
    transform: scale(1) rotate(90deg);
  }
  50% {
    opacity: 1;
    transform: scale(1) rotate(180deg);
  }
  75% {
    opacity: 1;
    transform: scale(1) rotate(270deg);
  }
  100% {
    opacity: 0;
    transform: scale(0) rotate(360deg);
  }
}

アニメーションの速度調整

.slow-animation {
  animation: slow-animation 4s linear infinite;
}

@keyframes slow-animation {
  /* アニメーション内容 */
}

.fast-animation {
  animation: fast-animation 1s linear infinite;
}

@keyframes fast-animation {
  /* アニメーション内容 */
}

アニメーションのタイミング関数

.ease-in {
  animation: ease-in 2s ease-in;
}

@keyframes ease-in {
  /* アニメーション内容 */
}

.ease-out {
  animation: ease-out 2s ease-out;
}

@keyframes ease-out {
  /* アニメーション内容 */
}

.ease-in-out {
  animation: ease-in-out 2s ease-in-out;
}

@keyframes ease-in-out {
  /* アニメーション内容 */
}

アニメーションの繰り返し回数

CSS アニメーションの持続時間（animation-duration）を設定するその他の方法

@keyframes ルール内で、各キーフレームのタイミングを指定することで、アニメーションの持続時間を間接的に設定できます。

.element {
  animation: my-animation 2s linear;
}

@keyframes my-animation {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

上記例では、my-animation アニメーションは 2 秒間で実行されますが、50% の時点で透明度が 1 になり、その後 100% までの 1 秒間かけて透明度が 0 になります。

transition プロパティは、要素の状態変化に伴うアニメーションを定義します。

.element {
  transition: opacity 2s linear;
}

/* マウスホバー時に要素の透明度を変更 */
.element:hover {
  opacity: 0.5;
}

上記例では、element 要素の透明度が変化する際、2 秒間かけてアニメーションされます。

JavaScript を使用して、アニメーションの持続時間を動的に設定することも可能です。

const element = document.querySelector('.element');

// 2 秒間かけて要素をフェードイン
element.animate({
  opacity: 1,
}, {
  duration: 2000,
});

上記コードは、element 要素を 2 秒間かけてフェードインさせるアニメーションを作成します。

animation-duration プロパティ以外にも、状況に応じて上記のような方法を検討することで、より柔軟なアニメーション表現が可能になります。