問題
21文字色をアニメーションで変化させよう
URLを読み込んだ時に動くアニメーションを作成します。 CSSアニメーションではたくさんのプロパティが用意されているので、オリジナリティ溢れるアニメーションが作れます。まずはこの問題をクリアしましょう!
HTML/CSSの問題に挑戦しよう！
問題
「文字色をアニメーションで変化させよう」
文字色をアニメーションで変えてみましょう!
ロード時に文字色を青色から赤色に2秒間かけてアニメーションしましょう。
動画を見本に作成してください。
あらかじめエディタに書くコード
<p>この文字を青から赤に変えよう</p>
¥HTML¥
期待する画面
解答と解説（文字色をアニメーションで変化させよう）
解説
※ご登録後トークルーム下部にあるメニュー内
「無料問題集※解答付き」を押すと
解答閲覧用URLが届きます
ロード時のアニメーションを展開する際は
keyframesを使用しましょう。
fromで開始時のアニメーションを作成し、
toで終了時のアニメーションを作成します。
アニメーションを適用させたいセレクターに
animationプロパティで定義したアニメーション名で呼び出し
アニメーションの設定をしましょう。
アニメーションの右の数字は(解答の2sの部分)
アニメーションにかかる秒数
その次は動かし方の指定
次はロードされて何秒後に動き出すか
次はアニメーションの回数で最後はアニメーション完了後の状態を設定できます。
補足
アニメーションに関するプロパティはいくつか用意されています。
animation-nameなど個別のプロパティを使って設定することもできますが、
今回の解答のように、まとめて設定(ショートハンドという)することも可能です。
指定する順番に決まりはありませんが、dulationとdelayの設定については先に記述した数値がdurationとなります。
今回keyframesの設定ではfromとtoを使用しましたが、以下のように更に細かく%で設定することも可能です。覚えておきましょう。
0%{開始時の設定}、50%{中間の設定}、100%{終了時の設定}
