問題

21
HTML_CSS

文字色をアニメーションで変化させよう

URLを読み込んだ時に動くアニメーションを作成します。 CSSアニメーションではたくさんのプロパティが用意されているので、オリジナリティ溢れるアニメーションが作れます。まずはこの問題をクリアしましょう!

HTML_CSSの問題に挑戦しよう!

問題

文字色をアニメーションで変化させよう

文字色をアニメーションで変えてみましょう!
ロード時に文字色を青色から赤色に2秒間かけてアニメーションしましょう。

動画を見本に作成してください。

あらかじめエディタに書くコード

                    <p>この文字を青から赤に変えよう</p>
¥HTML¥
                

期待する画面

解答と解説

解説

LINE登録して解答を見る

※ご登録後すぐに解答閲覧用URLが
LINEで届きます

ロード時のアニメーションを展開する際は
keyframesを使用しましょう。

fromで開始時のアニメーションを作成し、
toで終了時のアニメーションを作成します。
アニメーションを適用させたいセレクターに
animationプロパティで定義したアニメーション名で呼び出し
アニメーションの設定をしましょう。

アニメーションの右の数字は(解答の2sの部分)
アニメーションにかかる秒数
その次は動かし方の指定
次はロードされて何秒後に動き出すか
次はアニメーションの回数で最後はアニメーション完了後の状態を設定できます。

補足

アニメーションに関するプロパティはいくつか用意されています。
animation-nameなど個別のプロパティを使って設定することもできますが、
今回の解答のように、まとめて設定(ショートハンドという)することも可能です。
指定する順番に決まりはありませんが、dulationとdelayの設定については先に記述した数値がdurationとなります。

今回keyframesの設定ではfromとtoを使用しましたが、以下のように更に細かく%で設定することも可能です。覚えておきましょう。
0%{開始時の設定}、50%{中間の設定}、100%{終了時の設定}

さらにスキルアップしたい方は公式LINEから「HTML_CSS」と送信すると動画が見れます。

LINE登録して動画を視聴する
今なら豪華5大特典もらえる! LINE登録でGET