ログイン
問題21

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

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

アイコン画像

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

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

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

エディターのアイコンあらかじめエディタに書くコード

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

ブラウザのアイコン期待する画面

タグアイコン解答ソースコード

              <p>この文字を青から赤に変えよう</p>
¥HTML¥
            
              @keyframes changecolor {
  from {
    color: blue;
  }
  to {
      color: red;
  }
}
p {
  animation: changecolor 2s linear 0s 1 forwards;
}
¥CSS¥
            

コメントのアイコン解説

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

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

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

コメントのアイコン補足

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

今回keyframesの設定ではfromとtoを使用しましたが、以下のように更に細かく%で設定することも可能です。覚えておきましょう。
0%{開始時の設定}、50%{中間の設定}、100%{終了時の設定}
完了にする!
twitterのアイコン
活動記録をTweetする
1.HTMLの宣言をしてみよう
続きの動画を見たい方は公式LINEから「HTML」と送信すると動画が見れます。

LINE登録で、Web制作に役立つコンテンツ配信中‼

LINEの友達追加でお役立ち動画をGET!!
LINEの友達追加でお役立ち動画をGET!!