この実験では、学生たちは強力な @keyframes ルールとアニメーション技術を習得することで、CSS3 アニメーションの世界に没頭します。このコースでは、JavaScript に依存せずにキーフレーム構文の理解、アニメーションプロパティの定義、および高度なアニメーション効果の実装に焦点を当てて、動的なウェブアニメーションの作成について包括的な探求を行います。
参加者は、パーセンテージベースのキーフレームと変換プロパティを使用してアニメーションステージを定義することで、スムーズで複雑なアニメーションを制作する方法を学びます。実際の例と手動の演習を通じて、学生たちは要素を動的に移動、リサイズ、および着色する方法を見つけ出し、純粋な 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 またはパーセンテージ値を使用して状態を定義する簡単なアニメーションの例の出力:
[左から右にスムーズに移動する div 要素]
[赤色から緑色、そして青色に色を変える div 要素]このステップでは、@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 というアニメーションを定義します。例の出力:
[以下のような青色のボックス:
- 左から右に移動する
- 通常サイズから大きくなり、そして元に戻る
- 青色から緑色、そして赤色に色を変える]この例は、以下のことを示しています。
このステップでは、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 プロパティを変換することにより、アニメーションの動作を指定する方法を学びました。
実践演習では、画面上を要素を移動させたり、色を変えたり、アニメーションのタイミングと反復をカスタマイズしたりするなど、基本的なアニメーション効果と高度なアニメーション効果の作成方法を学習者に案内しました。さまざまなキーフレーム構成を試すことで、参加者は、スムーズで魅力的なウェブアニメーションを作成し、ユーザーインターフェイスのインタラクティビティと視覚的な魅力を高める実践的な経験を得ました。
