難易度:★★☆
プロパティ:animation
関連レッスン:Chapter2 レッスン2
h1 タグで囲まれているところに対し、CSSを反映させていきます。
CSSのファイルに@keyframes を追加します。場所はどこでも大丈夫です。
zoom_in は@keyframesの個別の名前で、自由につけることができます。今回は分かりやすくzoom_in (ズームイン)としました。
transformではどのくらい大きくさせるかを指定することができます。
scale(1)は、小さい状態から CSS で元々設定していたサイズまで大きくさせる設定です。
コピーしたコードをペースト(貼り付け)するか、直接書いてみましょう。
CSSのセレクタで h1 を探しましょう。
サンプルでは h1 に指定していますが、好きな箇所に反映できます。
わかりやすくするために枠線は削除してあります。また、header の背景を変更しています。
h1の中にanimationとtransformを追加します。
animationでは、先ほど指定した @keyframes zoom_in に対して、2秒かけて大きくさせるという指定をしています。時間を変更したい場合は2sの数字を書き換えます。
ease-in-out ではアニメーションの滑らかさを、forwards では動き方(拡大)を指定しています。
transformではどのくらい大きくさせるかを指定しています。scale(0.4) は 0.4 のサイズから大きくさせる設定です。
コピーしたコードを目的の箇所にペースト(貼り付け)するか、直接書いてみましょう。
Webページを開いたときに、タイトルにだんだん大きくなるアニメーションがついていたら完成です。
ブラウザのリロードボタンをクリックすると確認することができます。