問題
21CSSで文字アニメーションを作ろう
ページを開いたときに動く文字アニメーションは、CSSでどのように作られているのでしょうか。
この問題ではCSSを使った文字アニメーションの基本を学習します。
アニメーションの仕組みを理解することで、動きのある表現を自在に作れるようになります。
HTML/CSSの問題に挑戦しよう！
問題
「CSSで文字アニメーションを作ろう」
CSSを使って文字アニメーションを実装してみましょう。
ページ読み込み時に文字色が青から赤へ2秒かけて変化するアニメーションを設定し、CSSアニメーションの基本的な仕組みを学びます。
見本動画を参考に、指定された動きを再現してください。
あらかじめエディタに書くコード
<p>この文字を青から赤に変えよう</p>
¥HTML¥
期待する画面
解答と解説（CSSで文字アニメーションを作ろう）
解説
※ご登録後トークルーム下部にあるメニュー内
「無料問題集※解答付き」を押すと
解答閲覧用URLが届きます
CSSでアニメーションを実装する場合は、@keyframesとanimationプロパティを組み合わせて使用します。
@keyframesではアニメーションの「開始状態」と「終了状態」を定義し、その変化を時間をかけて実行します。
今回のように文字色を変化させる場合、colorプロパティを使って開始時と終了時の色を指定します。
@keyframesでは from（開始）と to（終了）、もしくは0%〜100%のような割合で変化を定義できます。
その後、animationプロパティを対象要素に指定することで、定義したアニメーションを適用します。
このプロパティでは、アニメーション名・実行時間（例：2s）・イージング（easeやlinear）・遅延時間（delay）・繰り返し回数（infiniteなど）・終了後の状態（forwardsなど）をまとめて設定できます。
ロード時に自動でアニメーションを実行したい場合は、ページ表示と同時にanimationを適用することで実現できます。
CSSアニメーションは、動きのあるUIを作る上で非常に重要な技術なので、基本構造（keyframes＋animation）をしっかり理解しておきましょう。
補足
animation はショートハンド（一括指定）プロパティで、animation-name や animation-duration などを個別に書くこともできます。
@keyframes は from〜to の2点指定のほか、0%・50%・100% のようにパーセンテージで書くと途中の状態も細かく制御できます。
「青→黄→赤」のように複数の色を経由させる表現もぜひ試してみましょう。
・要素を永遠に回転させるアニメーションも学びたい方：要素を永遠に回転させよう
・縦に回るボックスアニメーションに挑戦したい方：縦に回るボックスアニメーションを実装しよう
・CSSアニメーションをさらに練習したい方：CSSアニメーション問題集
ポイント
CSSアニメーションの基本を理解しよう
CSSアニメーションは、@keyframesとanimationプロパティを組み合わせて動きを作る仕組みです。
@keyframesでは開始状態と終了状態、または0%〜100%のように変化の過程を定義し、その変化を時間経過とともに再生します。
animationプロパティでは、アニメーション名・再生時間・動きの種類（easeやlinear）・遅延・繰り返し回数・終了時の状態などをまとめて指定できます。
これにより、ページ読み込み時に自動で動く文字アニメーションを実装することが可能です。
CSSアニメーションは文字の色変化だけでなく、位置移動や拡大縮小など多様な表現に応用でき、UI全体に動きを加えるための重要な技術です。
