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

はじめに

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

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("CSS")) -.-> css/BasicConceptsGroup(["Basic Concepts"]) css(("CSS")) -.-> css/BasicStylingGroup(["Basic Styling"]) css(("CSS")) -.-> css/CoreLayoutGroup(["Core Layout"]) css(("CSS")) -.-> css/IntermediateStylingGroup(["Intermediate Styling"]) css(("CSS")) -.-> css/DynamicStylingGroup(["Dynamic Styling"]) css/BasicConceptsGroup -.-> css/selectors("Selectors") css/BasicStylingGroup -.-> css/fonts("Fonts") css/CoreLayoutGroup -.-> css/box_model("Box Model") css/CoreLayoutGroup -.-> css/width_and_height("Width and Height") css/IntermediateStylingGroup -.-> css/backgrounds("Backgrounds") css/DynamicStylingGroup -.-> css/animations("Animations") css/DynamicStylingGroup -.-> css/transformations("Transformations") subgraph Lab Skills css/selectors -.-> lab-35259{{"ズームイン・ズームアウトアニメーション"}} css/fonts -.-> lab-35259{{"ズームイン・ズームアウトアニメーション"}} css/box_model -.-> lab-35259{{"ズームイン・ズームアウトアニメーション"}} css/width_and_height -.-> lab-35259{{"ズームイン・ズームアウトアニメーション"}} css/backgrounds -.-> lab-35259{{"ズームイン・ズームアウトアニメーション"}} css/animations -.-> lab-35259{{"ズームイン・ズームアウトアニメーション"}} css/transformations -.-> lab-35259{{"ズームイン・ズームアウトアニメーション"}} end

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プロパティ（不透明度、位置、サイズなど）をアニメーション化する実験もできます。