【CSSアニメーション】キーフレームを使ったCSSアニメーション

この記事では、CSSのアニメーション機能を使ってさまざまな動きを実装するプログラミングコードを解説していきます。

時間差で上下に移動するアニメーション

完成形

まず完成形を見ていきます。

それぞれのブロックが時間差で移動しています。

See the Pen cssanimation01 by aqua (@aqua-programdiary) on CodePen.

HTMLコーディング

HTMLのコードを解説します。

<span></span>
<span class="delay-1"></span>
<span class="delay-2"></span>
<span class="delay-3"></span>
<span class="delay-4"></span>

1. <span></span>:
   最初の<span>要素は遅延を持たず、そのままの速さでアニメーションします。
   
2. <span class="delay-1"></span>:
   2番目の<span>要素はdelay-1クラスが適用されており、アニメーションが200ms遅れて開始されます。
   
3. <span class="delay-2"></span>:
   3番目の<span>要素はdelay-2クラスが適用されており、アニメーションが400ms遅れて開始されます。
   
4. <span class="delay-3"></span>:
   4番目の<span>要素はdelay-3クラスが適用されており、アニメーションが600ms遅れて開始されます。
   
5. <span class="delay-4"></span>:
   5番目の<span>要素はdelay-4クラスが適用されており、アニメーションが800ms遅れて開始されます。
   

CSSコーディング

CSSのコードを解説します。

span {
  width: 50px;
  height: 50px;
  display: inline-block;
  background-color: blue;
  animation: animation 1s linear infinite;
}
@keyframes animation {
  0%,100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(50px);
  }
}
.delay-1 {
  animation-delay: 200ms;
}
.delay-2 {
  animation-delay: 400ms;
}
.delay-3 {
  animation-delay: 600ms;
}
.delay-4 {
  animation-delay: 800ms;
}

1. span の基本スタイル:
   • 幅と高さが 50px で、inline-block として表示されます。
   • 背景色は青 (blue) です。
2. animation プロパティ:
   • animation プロパティは、animation-name、animation-duration、animation-timing-function、animation-iteration-count などの値をまとめて指定します。
   • animation プロパティで animation-name に animation を指定し、1秒かけて線形のタイミングで無限にアニメーションを繰り返します。
3. @keyframes animation { ... }:
   • キーフレームアニメーション animation を定義します。
   • 0% および 100% のキーフレームで transform プロパティを指定し、translateY(0) で要素を移動させません。
   • 50% のキーフレームで transform プロパティを translateY(50px) に設定して、要素を垂直方向に50px移動させます。
4. .delay-1, .delay-2, .delay-3, .delay-4 のクラス:
   • アニメーションの遅延を設定するためのクラスです。それぞれのクラスに対して animation-delay プロパティを適用します。
   • .delay-1 は 200ms、.delay-2 は 400ms、.delay-3 は 600ms、.delay-4 は 800ms の遅延を持ちます。

時間差で１周するアニメーション

完成形

See the Pen cssanimation01-1 by aqua (@aqua-programdiary) on CodePen.

CSSコーディング

span {
  width: 50px;
  height: 50px;
  display: inline-block;
  background-color: blue;
  animation: animation 2s linear infinite;
  position: absolute;
}
@keyframes animation {
  0%,100% {
    transform: translate(0,0);
  }
  25% {
    transform: translate(0,200px);
  }
  50% {
    transform: translate(200px,200px);
  }
  75% {
    transform: translate(200px,0);
  }
}
.delay-1 {
  animation-delay: 200ms;
}
.delay-2 {
  animation-delay: 400ms;
}
.delay-3 {
  animation-delay: 600ms;
}
.delay-4 {
  animation-delay: 800ms;
}

• animationプロパティによってanimationキーフレームが2秒かけて繰り返し実行されるように設定されています。また、position: absolute;によって要素が絶対位置指定され、他の要素と重ならずに配置されるようになっています。
  
• @keyframes animationルールでは、アニメーションのキーフレームが定義されています。
  0%と100%のキーフレームでは、transform: translate(0,0);が適用されているため、要素は初期位置にとどまります。
  25%のキーフレームでは、transform: translate(0,200px);が適用され、要素はY軸方向に200px移動します。
  50%のキーフレームでは、transform: translate(200px,200px);が適用され、要素は右下に移動します。
  75%のキーフレームでは、transform: translate(200px,0);が適用され、要素はX軸方向に戻ります。
  
• .delay-1、.delay-2、.delay-3、.delay-4クラスのルールは、アニメーションが開始される遅延時間を指定しています。例えば、.delay-1クラスは200ms遅延が設定されており、そのためアニメーションは0.2秒後に開始されます。
  

時間差で１周しながら大きさや回転が変化するアニメーション

完成形

See the Pen cssanimation01-2 by aqua (@aqua-programdiary) on CodePen.

CSSコーディング

span {
  width: 50px;
  height: 50px;
  display: inline-block;
  background-color: blue;
  animation: animation 2s linear infinite;
  position: absolute;
}
@keyframes animation {
  0%,100% {
    transform: translate(0,0);
  }
  25% {
    transform: translate(0,200px) scale(0.5,0.5);
  }
  50% {
    transform: translate(200px,200px) rotate(180deg);
  }
  75% {
    transform: translate(200px,0) scale(0.1,0.1);
  }
}
.delay-1 {
  animation-delay: 200ms;
}
.delay-2 {
  animation-delay: 400ms;
}
.delay-3 {
  animation-delay: 600ms;
}
.delay-4 {
  animation-delay: 800ms;
}

@keyframes animationルールでは、

0%と100%のキーフレームでは、transform: translate(0,0);が適用されており、要素は初期位置にとどまります。

25%のキーフレームでは、transform: translate(0,200px) scale(0.5,0.5);が適用され、要素はY軸方向に200px移動し、同時にX軸とY軸の方向で0.5倍に縮小されます。

50%のキーフレームでは、transform: translate(200px,200px) rotate(180deg);が適用され、要素は右下に移動しつつ180度回転します。

75%のキーフレームでは、transform: translate(200px,0) scale(0.1,0.1);が適用され、要素はX軸方向に戻りつつ、X軸とY軸の方向で0.1倍に縮小されます。