CodeGym/コース/Frontend SELF JA/アニメーションループ

アニメーションループ

使用可能

8.1 プロパティ animation-iteration-count

CSSアニメーションは、動的なビジュアル効果を作り出し、ユーザーインターフェースを向上させることができるよ。これから、アニメーションループを制御する2つの重要なプロパティ、animation-iteration-countanimation-directionを見ていくね。

animation-iteration-count プロパティは、アニメーションが何回再生されるかを決定するんだ。このプロパティを使うと、アニメーションが1回だけ再生されるのか、何回も再生されるのか、または無限に再生されるのかをコントロールできるよ。

構文:

element {
  animation-iteration-count: number | infinite;
}

ここで:

  • number: アニメーションの再生回数 (例: 1, 2, 3, など)
  • infinite: アニメーションが無限に再生される

例:

HTML
<div class="box"></div>
CSS
@keyframes bounce {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-30px);
  }

  100% {
    transform: translateY(0);
  }
}

.box {
  width: 100px;
  height: 100px;
  background-color: #3498db;
  animation-name: bounce;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

コードの説明:

  • @keyframes bounce: 要素を上に持ち上げて元の位置に戻すアニメーションを定義するよ
  • animation-iteration-count: infinite: アニメーションを無限に再生するように設定するんだ

8.2 プロパティ animation-direction

animation-direction プロパティは、アニメーションの再生方向を決定するよ。アニメーションが正方向、逆方向、または両方向を交互に再生するのかを指定できるんだ。

構文:

element {
  animation-direction: normal | reverse | alternate | alternate-reverse;
}

ここで:

  • normal: アニメーションは正方向に再生されるよ (デフォルト)
  • reverse: アニメーションは逆方向に再生されるんだ
  • alternate: アニメーションは正方向と逆方向を交互に再生するよ
  • alternate-reverse: アニメーションは逆方向から始まり、正方向と逆方向を交互に再生するよ

正方向と逆方向の再生:

HTML
<div class="box1"></div>
<div class="box2"></div>
CSS
@keyframes moveRight {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(100px);
  }
}

.box1, .box2 {
  width: 100px;
  height: 100px;
  background-color: #2ecc71;
  animation-name: moveRight;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

.box1 {
  animation-direction: normal;
}

.box2 {
  animation-direction: reverse;
}

コードの説明:

  • .box1: アニメーションは正方向に再生されるよ
  • .box2: アニメーションは逆方向に再生されるんだ

方向の交互:

HTML
<div class="box1"></div>
<div class="box2"></div>
CSS
@keyframes moveRight {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(100px);
  }
}

.box1, .box2 {
  width: 100px;
  height: 100px;
  background-color: #3498db;
  animation-name: moveRight;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

.box1 {
  animation-direction: alternate;
}

.box2 {
  animation-direction: alternate-reverse;
}

コードの説明:

  • .box1: アニメーションは正方向と逆方向を交互に再生するよ
  • .box2: アニメーションは逆方向から始まり、正方向と逆方向を交互に再生するんだ

8.3 両方のプロパティを使った例

揺れる要素

  • この例は、右に左に揺れる要素を示しているよ:
HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>揺れる要素</title>
    <style>
      @keyframes swing {
        0% {
          transform: rotate(0deg);
        }

        50% {
          transform: rotate(10deg);
        }

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

      .box {
        width: 100px;
        height: 100px;
        background-color: #e74c3c;
        animation: swing 1s infinite alternate-reverse;
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

コードの説明:

  • @keyframes swing: 要素を回転させるアニメーションを定義するんだ
  • .box: swingというアニメーションが適用された要素で、1秒の間に無限に再生され、逆方向から始まるプロパティが適用されているよ
1
タスク
Frontend SELF JA,  レベル 24レッスン 2
ロック未解除
方向の交互
方向の交互
1
タスク
Frontend SELF JA,  レベル 24レッスン 2
ロック未解除
完全な組み合わせ
完全な組み合わせ
コメント
  • 人気
  • 新規
  • 古い
コメントを残すには、サインインしている必要があります
このページにはまだコメントがありません