ズームイン・ズームアウトアニメーション

CSSCSSBeginner
今すぐ練習

This tutorial is from open-source community. Access the source code

💡 このチュートリアルは英語版からAIによって翻訳されています。原文を確認するには、 ここをクリックしてください

はじめに

この実験では、シンプルで効果的なズームインとズームアウトのエフェクトを作成することで、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ファイルを調べ、必要な修正を行います。

  1. エディタで index.html ファイルを開きます。

  2. ファイルが空または存在しない場合は、以下の内容で作成します。

<!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>
  1. このHTMLが何をするかを理解しましょう。

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

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

基本的なCSSスタイリング

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

  1. エディタで style.css ファイルを開きます。

  2. ファイルが空または存在しない場合は、以下の内容で作成します。

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;
}
  1. このCSSが何をするかを理解しましょう。

    • ページに基本的なスタイリング(フォント、幅、マージン)を設定します。
    • 見出しを濃い灰色にスタイリングします。
    • アニメーション要素 .zoom-in-out-box については、
      • 周囲に24pxのマージンを追加します。
      • 幅と高さを50pxに設定します。
      • 鮮やかなピンクの背景色を設定します。
  2. これらの変更を加えた後、style.css ファイルを保存します。

  3. 進捗状況を確認するには、VSCodeの右下隅にある「Go Live」ボタンをクリックします。これにより、ポート8080でウェブサーバーが起動します。その後、Web 8080 タブを更新して、スタイルが適用されたボックスを確認します。

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

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

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

  1. 再度 style.css ファイルを開き、末尾に以下のコードを追加します。
@keyframes zoom-in-zoom-out {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.5, 1.5);
  }
  100% {
    transform: scale(1, 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 プロパティは、要素のサイズを変更します。
  2. これらのキーフレームを追加した後、style.css ファイルを保存します。

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

アニメーションの適用

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

  1. 再度 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;
}
  1. 追加した animation プロパティを理解しましょう。

    • animation は、複数のアニメーションプロパティを一度に設定する省略形のプロパティです。
    • zoom-in-zoom-out は、キーフレームアニメーションの名前です。
    • 1s は、アニメーションの1サイクルが1秒であることを指定します。
    • ease は、アニメーションがゆっくり始まり、加速してから再び減速するタイミング関数です。
    • infinite は、アニメーションが永遠に繰り返されることを意味します。
  2. これらの変更を加えた後、style.css ファイルを保存します。

  3. ウェブサーバーがすでに起動している場合は、単に Web 8080 タブを更新します。起動していない場合は、右下隅の「Go Live」をクリックしてサーバーを起動し、その後 Web 8080 タブを開きます。

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

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

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

  1. 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;
}
  1. 変更点を理解しましょう。

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

@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);
  }
}
  1. この更新されたキーフレーム定義では:

    • transform プロパティに rotate() 関数を追加しました。
    • アニメーションの50%地点で、要素は拡大すると同時に45度回転します。
    • 50%地点で背景色を青色に変更しました。
  2. これらの変更を加えた後、style.css ファイルを保存します。

  3. Web 8080 タブを更新して、強化されたアニメーションを確認しましょう。

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

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

まとめ

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

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

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

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