ズームイン・ズームアウトアニメーション：CSS 基礎の習得

はじめに

この実験では、シンプルで効果的なズームインとズームアウトのエフェクトを作成することで、CSS アニメーションを探索します。CSS アニメーションを使用すると、JavaScript を使わずにウェブページに動的な視覚効果を追加することができます。この実験の終わりまでに、CSS のキーフレームとアニメーションプロパティを使って、ウェブサイトのユーザー体験を向上させることができるスムーズなトランジションを作成する方法を理解するようになります。

これは Guided Lab です。学習と実践を支援するためのステップバイステップの指示を提供します。各ステップを完了し、実践的な経験を積むために、指示に注意深く従ってください。過去のデータによると、この中級レベルの実験の完了率は 75%です。学習者から 100% の好評価を得ています。

HTML 構造の理解

アニメーションを作成する前に、扱う HTML 構造を理解する必要があります。このステップでは、提供された HTML ファイルを調べ、必要な修正を行います。

エディタで index.html ファイルを開きます。
ファイルが空または存在しない場合は、以下の内容で作成します。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Zoom In Zoom Out Animation</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <h1>CSS Animation Demo</h1>
    <p>This box demonstrates a zoom in zoom out animation:</p>

    <div class="zoom-in-out-box"></div>
  </body>
</html>

この HTML が何をするかを理解しましょう。
- タイトルとビューポート設定を持つ標準的な HTML ドキュメント構造があります。
- style.css という名前の外部 CSS ファイルをリンクしています。
- デモを説明する見出しと段落を含んでいます。
- 最も重要なのは、アニメーションされる zoom-in-out-box クラスの <div> 要素があることです。
変更を加えた場合は、index.html ファイルを保存します。

この div 要素がアニメーションを作成するためのキャンバスになります。次のステップでは、この要素を CSS を使ってスタイルを設定します。

基本的な CSS スタイリング

HTML 構造が整ったので、アニメーション要素の基本的な CSS スタイリングを作成しましょう。

エディタで style.css ファイルを開きます。
ファイルが空または存在しない場合は、以下の内容で作成します。

body {
  font-family: Arial, sans-serif;
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

h1 {
  color: #333;
}

.zoom-in-out-box {
  margin: 24px;
  width: 50px;
  height: 50px;
  background: #f50057;
}

この CSS が何をするかを理解しましょう。
- ページに基本的なスタイリング（フォント、幅、マージン）を設定します。
- 見出しを濃い灰色にスタイリングします。
- アニメーション要素 .zoom-in-out-box については、
  - 周囲に 24px のマージンを追加します。
  - 幅と高さを 50px に設定します。
  - 鮮やかなピンクの背景色を設定します。
これらの変更を加えた後、style.css ファイルを保存します。
進捗状況を確認するには、VSCode の右下隅にある「Go Live」ボタンをクリックします。これにより、ポート 8080 でウェブサーバーが起動します。その後、Web 8080 タブを更新して、スタイルが適用されたボックスを確認します。

これで、ウェブページ上に小さなピンクの正方形が表示されるはずです。この正方形が、次のステップでアニメーション化する要素です。

キーフレームアニメーションの作成

CSS アニメーションは、アニメーションシーケンス中の様々な時点で要素が持つべきスタイルを指定するキーフレームを定義することで動作します。ズームイン・ズームアウトアニメーションのキーフレームを作成しましょう。

再度 style.css ファイルを開き、末尾に以下のコードを追加します。

@keyframes zoom-in-zoom-out {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.5, 1.5);
  }
  100% {
    transform: scale(1, 1);
  }
}

このコードが何をするかを理解しましょう。
- @keyframes は、アニメーションの段階とスタイルを定義する CSS のアットルール（at-rule）です。
- zoom-in-zoom-out は、アニメーションに付けた名前です（後でこの名前を参照します）。
- キーフレームの中で、アニメーションの異なる時点で何が起こるかを定義します。
  - 0%（開始時）では、要素は scale(1, 1) で通常のサイズです。
  - 50%（途中）では、要素は scale(1.5, 1.5) で通常の 1.5 倍のサイズに拡大します。
  - 100%（終了時）では、要素は通常のサイズに戻ります。
- scale() 関数を持つ transform プロパティは、要素のサイズを変更します。
これらのキーフレームを追加した後、style.css ファイルを保存します。

キーフレームはアニメーションが何をするかを定義しますが、まだ要素に適用していません。次のステップでは、アニメーションをボックスに適用します。

アニメーションの適用

キーフレームを定義したので、アニメーションをボックス要素に適用する必要があります。

再度 style.css ファイルを開き、.zoom-in-out-box セレクタを以下のように変更します。

.zoom-in-out-box {
  margin: 24px;
  width: 50px;
  height: 50px;
  background: #f50057;
  animation: zoom-in-zoom-out 1s ease infinite;
}

追加した animation プロパティを理解しましょう。
- animation は、複数のアニメーションプロパティを一度に設定する省略形のプロパティです。
- zoom-in-zoom-out は、キーフレームアニメーションの名前です。
- 1s は、アニメーションの 1 サイクルが 1 秒であることを指定します。
- ease は、アニメーションがゆっくり始まり、加速してから再び減速するタイミング関数です。
- infinite は、アニメーションが永遠に繰り返されることを意味します。
これらの変更を加えた後、style.css ファイルを保存します。
ウェブサーバーがすでに起動している場合は、単に Web 8080 タブを更新します。起動していない場合は、右下隅の「Go Live」をクリックしてサーバーを起動し、その後 Web 8080 タブを開きます。

これで、ピンクの正方形が滑らかにズームインとズームアウトを繰り返す連続アニメーションが表示されるはずです。正方形は元のサイズの 1.5 倍になるまで大きくなり、その後通常のサイズに戻ります。このサイクルは無限に繰り返されます。

アニメーションプロパティの実験

様々なアニメーションプロパティを試して、アニメーションをカスタマイズしましょう。これにより、これらのプロパティがアニメーションの動作にどのように影響するかを理解するのに役立ちます。

style.css ファイルを開き、.zoom-in-out-box セレクタを変更して、異なるアニメーションプロパティを試してみましょう。

.zoom-in-out-box {
  margin: 24px;
  width: 50px;
  height: 50px;
  background: #f50057;
  animation: zoom-in-zoom-out 2s ease-in-out infinite;
  /* Add a slight rotation during the animation */
  border-radius: 10px;
}

変更点を理解しましょう。
- アニメーションの持続時間を 2s（2 秒）に延長しました。
- タイミング関数を ease-in-out に変更しました。これにより、アニメーションの開始と終了が滑らかになります。
- border-radius を 10px に設定して、ボックスの角を丸くしました。
キーフレームも変更して、回転効果を追加しましょう。

@keyframes zoom-in-zoom-out {
  0% {
    transform: scale(1, 1) rotate(0deg);
  }
  50% {
    transform: scale(1.5, 1.5) rotate(45deg);
    background-color: #2196f3;
  }
  100% {
    transform: scale(1, 1) rotate(0deg);
  }
}

この更新されたキーフレーム定義では：
- transform プロパティに rotate() 関数を追加しました。
- アニメーションの 50% 地点で、要素は拡大すると同時に 45 度回転します。
- 50% 地点で背景色を青色に変更しました。
これらの変更を加えた後、style.css ファイルを保存します。
Web 8080 タブを更新して、強化されたアニメーションを確認しましょう。

これで、アニメーションは遅くなり（1 サイクルに 2 秒）、角が丸くなり、ズームする際に回転し、アニメーションの途中で色が変わるはずです。これは、CSS アニメーションが複数のプロパティの変更を組み合わせて、豊かな視覚効果を生み出すことができることを示しています。

異なるプロパティと値を自由に試して、アニメーションにどのような影響を与えるかを確認してください。

まとめ

ズームイン・ズームアウトアニメーションの実験を完了したことをお祝いします！この実験では、以下のことを学びました。

CSS アニメーションのために HTML を構造化する方法
基本的な CSS プロパティを使用して要素をスタイル付けする方法
アニメーションの段階を定義するキーフレームアニメーションを作成する方法
animation プロパティを使用して要素にアニメーションを適用する方法
タイミング、イージングを調整し、複数のプロパティの変更を組み合わせることでアニメーションをカスタマイズする方法

これらの CSS アニメーション技術は、ユーザーの操作に反応する魅力的なユーザーインターフェイスを作成したり、ウェブページ上の重要な要素に注目を集めたりするために適用できます。

学習を続けるには、animation-delay、animation-direction、animation-fill-mode などの他のアニメーションプロパティを探索することを検討してください。また、transform 以外のさまざまな CSS プロパティ（不透明度、位置、サイズなど）をアニメーション化する実験もできます。