LabEx
ログイン登録

キーフレームを使った CSS3 アニメーションの作成

CSSBeginner
オンラインで実践に進む

はじめに

この実験では、学生たちは強力な @keyframes ルールとアニメーション技術を習得することで、CSS3 アニメーションの世界に没頭します。このコースでは、JavaScript に依存せずにキーフレーム構文の理解、アニメーションプロパティの定義、および高度なアニメーション効果の実装に焦点を当てて、動的なウェブアニメーションの作成について包括的な探求を行います。

参加者は、パーセンテージベースのキーフレームと変換プロパティを使用してアニメーションステージを定義することで、スムーズで複雑なアニメーションを制作する方法を学びます。実際の例と手動の演習を通じて、学生たちは要素を動的に移動、リサイズ、および着色する方法を見つけ出し、純粋な CSS3 アニメーション技術を使用して魅力的で対話型のウェブ体験を作成するスキルを身につけます。

CSS3 アニメーションのキーフレーム構文を理解する

このステップでは、動的なウェブアニメーションを作成するためのビルディングブロックである CSS3 アニメーションのキーフレームの基本構文を学びます。CSS アニメーションを使用すると、JavaScript を使わずに要素を 1 つのスタイルから別のスタイルにスムーズに変換できます。

まず、CSS キーフレームの基本構文を理解しましょう。WebIDE を開き、~/project ディレクトリに styles.css という名前の新しいファイルを作成します。

CSS キーフレームアニメーションは、@keyframes ルールを使用して定義されます。このルールは、アニメーションシーケンスのさまざまな段階でのアニメーションの動作を指定します。構文を示す簡単な例を以下に示します。

@keyframes moveRight {
  /* 開始状態 (0% または "from") */
  from {
    transform: translateX(0);
  }

  /* 終了状態 (100% または "to") */
  to {
    transform: translateX(300px);
  }
}

この例では、moveRight はアニメーション名であり、要素が元の位置から右に 300 ピクセルまで移動する方法を定義しています。

より複雑なアニメーションには、パーセンテージベースのキーフレームも使用できます。

@keyframes colorChange {
  0% {
    background-color: red;
  }
  50% {
    background-color: green;
  }
  100% {
    background-color: blue;
  }
}

このアニメーションは、パーセンテージ値を使用してアニメーションの複数の段階を指定する方法を示しており、より複雑で動的な効果を実現できます。

キーフレーム構文に関して覚えておくポイント：

  • @keyframes の後に一意のアニメーション名を付ける
  • from/to またはパーセンテージ値を使用して状態を定義する
  • 各段階でアニメーションをかける CSS プロパティを指定する

簡単なアニメーションの例の出力：

[左から右にスムーズに移動する div 要素]
[赤色から緑色、そして青色に色を変える div 要素]

@keyframes ルールを使って基本的なアニメーションを定義する

このステップでは、@keyframes ルールを使って簡単な移動要素のアニメーションを作成することで、基本的なアニメーションを作成する方法を学びます。前のステップの知識を拡張して、より実用的な例を作成します。

まず、アニメーションを表示するための HTML ファイルを作成しましょう。WebIDE を開き、~/project ディレクトリに index.html という名前の新しいファイルを作成します。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Basic CSS Animation</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="animated-box"></div>
  </body>
</html>

次に、より詳細なアニメーションで先ほど作成した styles.css ファイルを更新します。

.animated-box {
  width: 100px;
  height: 100px;
  background-color: blue;
  position: relative;
}

@keyframes moveAndResize {
  0% {
    /* 開始状態 */
    transform: translateX(0) scale(1);
    background-color: blue;
  }

  50% {
    /* アニメーションの中点 */
    transform: translateX(200px) scale(1.5);
    background-color: green;
  }

  100% {
    /* 終了状態 */
    transform: translateX(400px) scale(1);
    background-color: red;
  }
}

@keyframes ルールを解説しましょう。

  • moveAndResize というアニメーションを定義します。
  • 0%（開始時）では、ボックスは元の位置にあります。
  • 50%（中点）では、ボックスが右に 200px 移動し、サイズが拡大します。
  • 100%（終了時）では、ボックスが右に 400px 移動し、元のサイズに戻ります。

例の出力：

[以下のような青色のボックス:
 - 左から右に移動する
 - 通常サイズから大きくなり、そして元に戻る
 - 青色から緑色、そして赤色に色を変える]

この例は、以下のことを示しています。

  • 多段階のアニメーションを作成する方法
  • パーセンテージベースのキーフレームを使用する方法
  • 複数の変換（平行移動とスケーリング）を組み合わせる方法
  • アニメーション中に色を変える方法

HTML 要素にアニメーション プロパティを適用する

このステップでは、HTML 要素にアニメーションプロパティを適用する方法を学びます。これにより、キーフレームアニメーションが生き生きと動き出します。前の styles.css ファイルを変更して、アニメーションの動作を制御する特定のアニメーションプロパティを追加します。

以下の CSS で styles.css ファイルを更新します。

.animated-box {
  width: 100px;
  height: 100px;
  background-color: blue;
  position: relative;

  /* アニメーションプロパティ */
  animation-name: moveAndResize; /* キーフレームアニメーションの名前 */
  animation-duration: 3s; /* 1 つのアニメーションサイクルの合計時間 */
  animation-timing-function: ease-in-out; /* スムーズな加速と減速 */
  animation-delay: 1s; /* 開始前に 1 秒待つ */
}

@keyframes moveAndResize {
  0% {
    transform: translateX(0) scale(1);
    background-color: blue;
  }

  50% {
    transform: translateX(200px) scale(1.5);
    background-color: green;
  }

  100% {
    transform: translateX(400px) scale(1);
    background-color: red;
  }
}

重要なアニメーションプロパティの解説：

  • animation-name: 要素を特定の @keyframes ルールにリンクします。
  • animation-duration: 1 つの完全なアニメーションサイクルの合計時間を設定します。
  • animation-timing-function: アニメーションの速度曲線を制御します。
  • animation-delay: アニメーション開始前の待機期間を指定します。

また、これらをまとめるためのショートハンドの animation プロパティも使用できます。

.animated-box {
  animation: moveAndResize 3s ease-in-out 1s;
}

例の出力：

[以下のような青色のボックス:
 - 開始前に 1 秒待つ
 - 左から右にスムーズに移動する
 - サイズと色を徐々に変える
 - 1 つのアニメーションサイクルを完了するのに 3 秒かかる]

アニメーションのタイミングと反復回数をカスタマイズする

このステップでは、CSS アニメーションのタイミング、反復、方向を制御することで、アニメーションを微調整する方法を学びます。高度なアニメーションのカスタマイズを示すために、前の例を拡張します。

以下の CSS で styles.css ファイルを更新します。

.animated-box {
  width: 100px;
  height: 100px;
  background-color: blue;
  position: relative;

  /* アニメーションプロパティをカスタマイズする */
  animation-name: moveAndResize;
  animation-duration: 3s;
  animation-timing-function: cubic-bezier(0.5, 0.1, 0.3, 1);
  animation-iteration-count: 3; /* アニメーションを 3 回繰り返す */
  animation-direction: alternate; /* 各反復で方向を逆にする */
  animation-fill-mode: forwards; /* アニメーション後に最終状態を維持する */
}

@keyframes moveAndResize {
  0% {
    transform: translateX(0) scale(1);
    background-color: blue;
  }

  100% {
    transform: translateX(400px) scale(1.5);
    background-color: red;
  }
}

重要なアニメーションカスタマイズプロパティ：

  • animation-timing-function: 速度曲線を制御します (例：カスタム加速用の cubic-bezier())
  • animation-iteration-count: アニメーションが何回繰り返されるかを定義します
  • animation-direction: アニメーションの再生方向を決定します
  • animation-fill-mode: アニメーションの前/後でスタイルがどのように適用されるかを指定します

また、ショートハンドの animation プロパティも使用できます。

.animated-box {
  animation: moveAndResize 3s cubic-bezier(0.5, 0.1, 0.3, 1) 3 alternate forwards;
}

例の出力：

[以下のような青色のボックス:
 - 3 回移動してサイズを変更する
 - 各反復で方向を変える
 - カスタム速度曲線を使用する
 - アニメーション後に最終位置にとどまる]

高度なアニメーション効果を試す

このステップでは、CSS キーフレームと変換の力を示す多要素の複雑なアニメーションを作成することで、高度な CSS アニメーション技術を探求します。

複数のアニメーション要素を含むように index.html ファイルを更新します。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Advanced CSS Animations</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="container">
      <div class="circle circle1"></div>
      <div class="circle circle2"></div>
      <div class="circle circle3"></div>
    </div>
  </body>
</html>

styles.css の内容を以下の高度なアニメーションに置き換えます。

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f0f0f0;
}

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  position: absolute;
  opacity: 0.7;
}

.circle1 {
  background-color: #ff6b6b;
  animation: orbit1 4s infinite linear;
}

.circle2 {
  background-color: #4ecdc4;
  animation: orbit2 4s infinite linear;
}

.circle3 {
  background-color: #45b7d1;
  animation: orbit3 4s infinite linear;
}

@keyframes orbit1 {
  0% {
    transform: rotate(0deg) translateX(150px) rotate(0deg);
  }
  100% {
    transform: rotate(360deg) translateX(150px) rotate(-360deg);
  }
}

@keyframes orbit2 {
  0% {
    transform: rotate(120deg) translateX(200px) rotate(-120deg);
  }
  100% {
    transform: rotate(480deg) translateX(200px) rotate(-480deg);
  }
}

@keyframes orbit3 {
  0% {
    transform: rotate(240deg) translateX(250px) rotate(-240deg);
  }
  100% {
    transform: rotate(600deg) translateX(250px) rotate(-600deg);
  }
}

示される重要な高度なアニメーション技術：

  • 複数の同時アニメーション
  • 複雑な回転と平行移動
  • 線形タイミングでの無限アニメーション
  • 交互の軌道運動
  • 不透明度と色の変化

例の出力：

[中心点を中心に回転する 3 つの色付き円
 - 円が異なる距離で移動する
 - 連続的でスムーズな回転
 - 重なり合い、半透明な効果]

まとめ

この実験では、参加者は CSS3 アニメーションのキーフレームの基本を探求し、JavaScript を使用せずに動的なウェブアニメーションを作成する方法を学びました。この実験では、開発者がパーセンテージベースまたは from/to 状態を使用して複雑なアニメーションシーケンスを定義できる @keyframes ルールの構文を理解することに焦点を当てていました。参加者は、アニメーションシーケンスのさまざまな段階で位置、色、サイズなどの CSS プロパティを変換することにより、アニメーションの動作を指定する方法を学びました。

実践演習では、画面上を要素を移動させたり、色を変えたり、アニメーションのタイミングと反復をカスタマイズしたりするなど、基本的なアニメーション効果と高度なアニメーション効果の作成方法を学習者に案内しました。さまざまなキーフレーム構成を試すことで、参加者は、スムーズで魅力的なウェブアニメーションを作成し、ユーザーインターフェイスのインタラクティビティと視覚的な魅力を高める実践的な経験を得ました。

関連 CSS コース
初心者向け CSS

初心者向け CSS

cssweb-development
三目並べウェブアプリを作成する

三目並べウェブアプリを作成する

javascriptweb-development
モグラたたき Web ゲームの作成

モグラたたき Web ゲームの作成

javascriptweb-development