メニュー

当サイト使用テーマ・サーバー

\ SWELL【WordPressテーマ】 /

\ レンタルサーバー【ConoHa WING】 /

プログラミング学習

美容・脱毛

ホームページ制作

【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-nameanimation-durationanimation-timing-functionanimation-iteration-count などの値をまとめて指定します。
    • animation プロパティで animation-nameanimation を指定し、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 の遅延を持ちます。

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

完成形

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秒後に開始されます。

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

完成形

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倍に縮小されます。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次