HTML_CSS
LINEでログイン
Googleでログイン
Twitterでログイン問題21：文字色をアニメーションで変化させよう
文字色をアニメーションで変えてみましょう!
ロード時に文字色を青色から赤色に2秒間かけてアニメーションしましょう。
動画を見本に作成してください。
ロード時に文字色を青色から赤色に2秒間かけてアニメーションしましょう。
動画を見本に作成してください。
あらかじめエディタに書くコード
<p>この文字を青から赤に変えよう</p>
¥HTML¥
期待する画面
解答ソースコード
<p>この文字を青から赤に変えよう</p>
¥HTML¥
@keyframes changecolor {
from {
color: blue;
}
to {
color: red;
}
}
p {
animation: changecolor 2s linear 0s 1 forwards;
}
¥CSS¥
補足
アニメーションに関するプロパティはいくつか用意されています。
animation-nameなど個別のプロパティを使って設定することもできますが、
今回の解答のように、まとめて設定(ショートハンドという)することも可能です。
指定する順番に決まりはありませんが、dulationとdelayの設定については先に記述した数値がdurationとなります。
今回keyframesの設定ではfromとtoを使用しましたが、以下のように更に細かく%で設定することも可能です。覚えておきましょう。
0%{開始時の設定}、50%{中間の設定}、100%{終了時の設定}
animation-nameなど個別のプロパティを使って設定することもできますが、
今回の解答のように、まとめて設定(ショートハンドという)することも可能です。
指定する順番に決まりはありませんが、dulationとdelayの設定については先に記述した数値がdurationとなります。
今回keyframesの設定ではfromとtoを使用しましたが、以下のように更に細かく%で設定することも可能です。覚えておきましょう。
0%{開始時の設定}、50%{中間の設定}、100%{終了時の設定}
完了にする！
活動記録をTweetする
1.HTMLの宣言をしてみよう
keyframesを使用しましょう。
fromで開始時のアニメーションを作成し、
toで終了時のアニメーションを作成します。
アニメーションを適用させたいセレクターに
animationプロパティで定義したアニメーション名で呼び出し
アニメーションの設定をしましょう。
アニメーションの右の数字は(解答の2sの部分)
アニメーションにかかる秒数
その次は動かし方の指定
次はロードされて何秒後に動き出すか
次はアニメーションの回数で最後はアニメーション完了後の状態を設定できます。