LabEx
ログイン登録

タイミング関数を使った CSS3 トランジションの作成

CSSBeginner
オンラインで実践に進む

はじめに

この実験では、参加者は CSS3 トランジションの力強い世界を探求し、タイミング関数とトランジションプロパティを使ってスムーズでダイナミックなビジュアルエフェクトを作成する方法を学びます。この実験では、基本的な HTML と CSS プロジェクトのセットアップから高度なトランジションアニメーションの実験まで、CSS トランジションをどのように実装し操作するかを理解するための包括的な実践的アプローチを提供します。

参加者はまず HTML と CSS ファイルでプロジェクト構造を作成し、次に徐々にホバーエフェクトを適用し、トランジション構文を理解し、さまざまなタイミング関数を探求します。実践的な演習を通じて、学習者は要素の変換を制御し、インタラクティブなユーザーインターフェイスを作成し、CSS3 トランジション技術を使ってウェブデザインに洗練されたビジュアルなインタラクションを追加するスキルを身につけます。

HTML プロジェクトと基本的なスタイリングをセットアップする

このステップでは、CSS3 トランジションを探求するための基本的な HTML と CSS プロジェクトをセットアップします。簡単なプロジェクト構造を作成し、トランジションエフェクトの準備として初期のスタイリングを追加します。

まず、プロジェクトディレクトリに移動します。

cd ~/project

CSS トランジションプロジェクト用の新しいディレクトリを作成します。

mkdir css-transitions
cd css-transitions

次に、WebIDE を使ってプロジェクトファイルを作成します。index.htmlファイルを作成します。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>CSS3 Transitions</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="container">
      <div class="box">Hover Me</div>
    </div>
  </body>
</html>

次に、いくつかの基本的なスタイリングを持つstyles.cssファイルを作成します。

body {
  font-family: Arial, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  background-color: #f0f0f0;
}

.container {
  text-align: center;
}

.box {
  width: 200px;
  height: 100px;
  background-color: #3498db;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  cursor: pointer;
}

ファイルが正しく作成されたことを確認しましょう。

ls

出力例：

index.html  styles.css

このセットアップは、CSS トランジションプロジェクトの基本的な基盤を提供します。さまざまなトランジションエフェクトを示すために使用する div を持つ簡単な HTML 構造を作成しました。CSS は、要素を視覚的に魅力的にし、ページの中央に配置するための初期のスタイリングを提供します。

ホバーエフェクトに基本的なトランジションを実装する

このステップでは、要素にホバーしたときに基本的な CSS トランジションエフェクトを作成する方法を学びます。CSS トランジションを使用すると、指定された期間にわたってプロパティ値をスムーズに変更できます。

WebIDE でstyles.cssファイルを開き、.boxクラスを変更してホバートランジションを追加します。

.box {
  width: 200px;
  height: 100px;
  background-color: #3498db;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  cursor: pointer;

  /* トランジションプロパティを追加 */
  transition: background-color 0.5s ease;
}

.box:hover {
  background-color: #2980b9;
}

トランジションプロパティを解説しましょう。

  • transition: background-color 0.5s ease;
    • background-color: トランジションするプロパティ
    • 0.5s: トランジションの期間（半秒）
    • ease: タイミング関数（スムーズな開始と終了）

次に、エフェクトをもっと面白くするためにスケールトランジションを追加します。

.box {
  width: 200px;
  height: 100px;
  background-color: #3498db;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  cursor: pointer;

  /* 複数のトランジションプロパティ */
  transition:
    background-color 0.5s ease,
    transform 0.3s ease;
}

.box:hover {
  background-color: #2980b9;
  transform: scale(1.1);
}

ファイルを保存し、ウェブブラウザでindex.htmlを開きます。ボックスにホバーすると、以下が見られます。

  1. 背景色がスムーズに変化します。
  2. ボックスのサイズがわずかに増大します。
  3. トランジションが指定された期間にわたってスムーズに起こります。

見られる例：

  • ホバー前：通常のサイズの青いボックス
  • ホバー時：やや濃い青で、やや大きいボックス
  • トランジションはスムーズで徐々に起こります。

トランジションプロパティと構文を探求する

このステップでは、CSS トランジションプロパティにさらに深く入り、より複雑で正確なトランジションを作成するための完全な構文について学びます。

さまざまなトランジションプロパティを探求するためにstyles.cssファイルを更新します。

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  gap: 20px;
}

.box {
  width: 100px;
  height: 100px;
  background-color: #3498db;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  cursor: pointer;

  /* 完全なトランジション構文 */
  transition-property: background-color, transform, border-radius;
  transition-duration: 0.5s, 0.3s, 0.4s;
  transition-timing-function: ease-in-out, linear, ease;
  transition-delay: 0s, 0.1s, 0s;
}

.box:hover {
  background-color: #2980b9;
  transform: scale(1.2) rotate(15deg);
  border-radius: 50%;
}

トランジションプロパティを解説しましょう。

  1. transition-property: トランジションする CSS プロパティを指定します。
    • カンマで区切られた複数のプロパティが可能です。
    • allを使用すると、すべての変更可能なプロパティにトランジションを適用できます。
  2. transition-duration: トランジションにかかる時間を設定します。
    • 異なるプロパティには異なる期間を指定できます。
    • 秒（s）またはミリ秒（ms）で指定します。
  3. transition-timing-function: トランジションの速度曲線を制御します。
    • linear: 一定の速度
    • ease-in: ゆっくりと始まり、加速する
    • ease-out: 速く始まり、減速する
    • ease-in-out: 始まりと終わりがゆっくりとする
  4. transition-delay: トランジションが始まる前に遅延を追加します。
    • 連続的または交互に表示するエフェクトを作成するのに便利です。

代わりに、ショートハンドのtransitionプロパティを使用することもできます。

.box {
  transition:
    background-color 0.5s ease-in-out,
    transform 0.3s linear 0.1s,
    border-radius 0.4s ease;
}

複数のボックスを表示するためにindex.htmlを更新します。

<body>
  <div class="container">
    <div class="box">Box 1</div>
    <div class="box">Box 2</div>
    <div class="box">Box 3</div>
  </div>
</body>

ボックスにホバーすると、以下が見られます。

  • 異なるトランジションプロパティ
  • さまざまなタイミングと遅延
  • 同時に複数の変換が行われる

さまざまなタイミング関数を試す

このステップでは、トランジションの速度と加速度を制御するさまざまな CSS タイミング関数を探求します。タイミング関数は、トランジション中の中間値の計算方法を定義します。

さまざまなタイミング関数を示すために複数のボックスを含めるようにindex.htmlを更新します。

<body>
  <div class="container">
    <div class="box linear">Linear</div>
    <div class="box ease">Ease</div>
    <div class="box ease-in">Ease In</div>
    <div class="box ease-out">Ease Out</div>
    <div class="box ease-in-out">Ease In-Out</div>
  </div>
</body>

さまざまなタイミング関数を紹介するためにstyles.cssを変更します。

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  gap: 20px;
  flex-wrap: wrap;
}

.box {
  width: 100px;
  height: 100px;
  background-color: #3498db;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

/* 線形タイミング関数 */
.linear {
  transition: transform 2s linear;
}
.linear:hover {
  transform: translateX(200px);
}

/* Ease（デフォルト）タイミング関数 */
.ease {
  transition: transform 2s ease;
}
.ease:hover {
  transform: translateX(200px);
}

/* Ease-In タイミング関数 */
.ease-in {
  transition: transform 2s ease-in;
}
.ease-in:hover {
  transform: translateX(200px);
}

/* Ease-Out タイミング関数 */
.ease-out {
  transition: transform 2s ease-out;
}
.ease-out:hover {
  transform: translateX(200px);
}

/* Ease-In-Out タイミング関数 */
.ease-in-out {
  transition: transform 2s ease-in-out;
}
.ease-in-out:hover {
  transform: translateX(200px);
}

タイミング関数の特徴：

  • linear: 開始から終了まで一定の速度
  • ease: ゆっくりとした開始、速い中間、ゆっくりとした終了（デフォルト）
  • ease-in: ゆっくりとした開始、終了に向かって加速
  • ease-out: 速い開始、終了に向かって減速
  • ease-in-out: ゆっくりとした開始と終了、中間では速い

より精密な制御のためにカスタムの三次ベジェ曲線関数も使用できます。

.custom-timing {
  transition: transform 2s cubic-bezier(0.25, 0.1, 0.25, 1);
}

各ボックスにホバーすると、それぞれのタイミング関数に基づいて異なる動きのパターンが観察されます。

高度なトランジションアニメーションを作成する

このステップでは、複数のプロパティを組み合わせたより複雑なトランジションアニメーションを作成し、高度な CSS トランジション技術を示します。

よりインタラクティブな要素を含めるようにindex.htmlを更新します。

<body>
  <div class="container">
    <div class="card">
      <div class="card-front">Hover Me</div>
      <div class="card-back">Advanced Transition!</div>
    </div>
  </div>
</body>

高度なトランジションを持つフリップカードを作成するためにstyles.cssを変更します。

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f0f0f0;
  font-family: Arial, sans-serif;
}

.card {
  width: 300px;
  height: 200px;
  position: relative;
  perspective: 1000px;
}

.card-front,
.card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  transition:
    transform 0.8s cubic-bezier(0.25, 0.1, 0.25, 1),
    background-color 0.5s ease,
    box-shadow 0.5s ease;
}

.card-front {
  background-color: #3498db;
  color: white;
  transform: rotateY(0deg);
}

.card-back {
  background-color: #2ecc71;
  color: white;
  transform: rotateY(180deg);
}

.card:hover.card-front {
  transform: rotateY(180deg);
  background-color: #2980b9;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.card:hover.card-back {
  transform: rotateY(0deg);
  background-color: #27ae60;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

重要な高度なトランジション技術：

  1. rotateYを使用した 3D 回転
  2. 3D エフェクトのためのperspective
  3. 要素の裏面を非表示にするbackface-visibility
  4. 複数のトランジションプロパティ
  5. カスタムの三次ベジェ曲線タイミング関数
  6. ホバー状態の変換
  7. 色とシャドウのトランジション

このアニメーションは以下を示しています。

  • スムーズな 3D カードのフリップ
  • ホバー時の色の変化
  • シャドウエフェクト
  • 複雑なタイミングと複数のプロパティのトランジション

カードにホバーすると：

  • 表の面が回転して色が変化します。
  • 裏の面が表示されます。
  • スムーズな複数プロパティのトランジションが起こります。

まとめ

この実験では、参加者はインタラクティブなデザイン技術に焦点を当てた包括的なウェブプロジェクトを構築することで、動的な CSS3 トランジションを作成する方法を学びます。この実験は、構造化された HTML と CSS の環境をセットアップすることから始まり、背景色、境界半径、フレックスボックスレイアウトなどの基本的なプロパティでスタイル付けされた中央の div 要素を持つ基礎プロジェクトを作成します。

学習の旅は、ホバーエフェクトの実装、トランジションプロパティと構文の探求、そしてスムーズで魅力的なアニメーションを作成するためのさまざまなタイミング関数の実験を通じて進みます。CSS トランジションプロジェクトを体系的に開発することで、参加者は要素のプロパティを操作し、トランジションの仕組みを理解し、微妙な応答型デザイン技術を通じてユーザー体験を向上させる視覚的に魅力的なウェブインタラクションを作成する実践的なスキルを身につけます。

関連 CSS コース
初心者向け CSS

初心者向け CSS

cssweb-development
三目並べウェブアプリを作成する

三目並べウェブアプリを作成する

javascriptweb-development
モグラたたき Web ゲームの作成

モグラたたき Web ゲームの作成

javascriptweb-development