西天竺への旅

はじめに

このプロジェクトでは、CSSを使ってアニメーションシーケンスを作成する方法を学びます。このプロジェクトは、西天竺への仏典求めの旅に出た一群の弟子たちの物語に基づいています。しかし、彼らは途中で悪魔にとらわれ、トムというキャラクターがCSSを使って彼らを救い、弟子たちが西への旅を続けることができるようになりました。

👀 プレビュー

🎯 タスク

このプロジェクトでは、以下を学びます。

• シーン内のキャラクターのアニメーションフレームを設定する方法
• 各キャラクターのアニメーションキーフレームを定義して、動きの錯覚を作り出す方法
• アニメーションを無限にループさせて、連続したシームレスなアニメーションを作成する方法

🏆 成果

このプロジェクトを完了すると、以下のことができるようになります。

• CSSアニメーションを使って、ダイナミックで魅力的なビジュアルエフェクトを作成する
• 複数のアニメーションを調整して、まとまりのある同期したアニメーションシーケンスを作成する
• アニメーションのパフォーマンスと応答性を最適化する

Skills Graph

プロジェクト構造を設定する

始めるには、実験環境を開き、ディレクトリ構造は以下の通りです。

├── css
│   └── style.css
├── images
│   ├── background.webp
│   ├── west_01.png
│   ├── west_02.png
│   ├── west_03.png
│   └── west_04.png
└── index.html

ここで：

• index.html はメインページです。
• images は画像フォルダです。
• css はcssフォルダです。

WebIDEの右下隅にある Go Live ボタンをクリックして、プロジェクトを実行します。

ブラウザで index.html ページをプレビューすると、アニメーションが一度だけ再生されてから停止することに気付きます。ページの効果は以下の通りです。

アニメーションフレームを設定する

このステップでは、西天竺への旅のプロジェクトにおけるキャラクターのアニメーションフレームを設定する方法を学びます。

1. コードエディタで css/style.css ファイルを開くと、a1、a2、a3、a4 が与えられた4つの @keyframes ルールがあり、@keyframes ルールがアニメーションシーケンスを定義していることがわかります。これらのキーフレームは各キャラクターのアニメーションを定義し、背景画像を水平方向に移動させて動きの錯覚を作り出します。
2. .actor:first-child ルールで、最初のキャラクターにアニメーションを与えるために以下のコードに変更します。

animation: a1 0.8s steps(8) infinite;

これにより、最初のキャラクターのアニメーションが無限にループし、各フレームは0.8秒間続き、アニメーションは8段階で構成されます。3. .actor:nth-child(2) ルールで、2番目のキャラクターにアニメーションを与えるために以下のコードに変更します。

animation: a2 0.8s steps(8) infinite;

これにより、2番目のキャラクターのアニメーションが無限にループし、各フレームは0.8秒間続き、アニメーションは8段階で構成されます。4. .actor:nth-child(3) ルールで、3番目のキャラクターにアニメーションを与えるために以下のコードに変更します。

animation: a3 0.8s steps(8) infinite;

これにより、3番目のキャラクターのアニメーションが無限にループし、各フレームは0.8秒間続き、アニメーションは8段階で構成されます。5. .actor:last-child ルールで、4番目のキャラクターにアニメーションを与えるために以下のコードに変更します。

animation: a4 0.8s steps(8) infinite;

これにより、4番目のキャラクターのアニメーションが無限にループし、各フレームは0.8秒間続き、アニメーションは8段階で構成されます。6. style.css ファイルを保存します。

これで、ブラウザで index.html ファイルをプレビューすると、キャラクターのアニメーションが無限にループするはずです。

まとめ

おめでとうございます！このプロジェクトを完了しました。実力を向上させるために、LabExでさらに多くの実験を行って練習してください。