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

2023年9月10日

この記事では、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>

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

span の基本スタイル:
- 幅と高さが 50px で、inline-block として表示されます。
- 背景色は青 (blue) です。
animation プロパティ:
- animation プロパティは、animation-name、animation-duration、animation-timing-function、animation-iteration-count などの値をまとめて指定します。
- animation プロパティで animation-name に animation を指定し、1秒かけて線形のタイミングで無限にアニメーションを繰り返します。
@keyframes animation { ... }:
- キーフレームアニメーション animation を定義します。
- 0% および 100% のキーフレームで transform プロパティを指定し、translateY(0) で要素を移動させません。
- 50% のキーフレームで transform プロパティを translateY(50px) に設定して、要素を垂直方向に50px移動させます。
.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倍に縮小されます。