文字がだんだん大きくなるアニメーション

できあがりイメージ

つくりかた

Step2 キーフレームでアニメーションの動きを指定する

CSSのファイルに@keyframes を追加します。場所はどこでも大丈夫です。
zoom_in は@keyframesの個別の名前で、自由につけることができます。今回は分かりやすくzoom_in (ズームイン)としました。
transformではどのくらい大きくさせるかを指定することができます。
scale(1)は、小さい状態から CSS で元々設定していたサイズまで大きくさせる設定です。
コピーしたコードをペースト（貼り付け）するか、直接書いてみましょう。

Step3 徐々に大きくさせたい要素のCSSセレクタを探す

CSSのセレクタで h1 を探しましょう。
サンプルでは h1 に指定していますが、好きな箇所に反映できます。
わかりやすくするために枠線は削除してあります。また、header の背景を変更しています。

Step4 h1にアニメーションを追加する

h1の中にanimationとtransformを追加します。
animationでは、先ほど指定した @keyframes zoom_in に対して、2秒かけて大きくさせるという指定をしています。時間を変更したい場合は2sの数字を書き換えます。
ease-in-out ではアニメーションの滑らかさを、forwards では動き方(拡大)を指定しています。
transformではどのくらい大きくさせるかを指定しています。scale(0.4) は 0.4 のサイズから大きくさせる設定です。

Step5 コードを書くかコピー＆ペーストする

コピーしたコードを目的の箇所にペースト（貼り付け）するか、直接書いてみましょう。

Step6 実際の見え方を確認する

Webページを開いたときに、タイトルにだんだん大きくなるアニメーションがついていたら完成です。
ブラウザのリロードボタンをクリックすると確認することができます。