アニメーションフレームを設定する
このステップでは、西天竺への旅のプロジェクトにおけるキャラクターのアニメーションフレームを設定する方法を学びます。
コードエディタで 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
ファイルをプレビューすると、キャラクターのアニメーションが無限にループするはずです。