CSS でアニメーションシーケンスを作成する

はじめに

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

👀 プレビュー

CSS アニメーション化された弟子たちの旅

🎯 タスク

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

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

🏆 成果

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

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

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

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

├── 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 ページをプレビューすると、アニメーションが一度だけ再生されてから停止することに気付きます。ページの効果は以下の通りです。

初期効果

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

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

コードエディタで css/style.css ファイルを開くと、a1、a2、a3、a4 が与えられた 4 つの @keyframes ルールがあり、@keyframes ルールがアニメーションシーケンスを定義していることがわかります。これらのキーフレームは各キャラクターのアニメーションを定義し、背景画像を水平方向に移動させて動きの錯覚を作り出します。
.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 でさらに多くの実験を行って練習してください。