💡 このチュートリアルは英語版からAIによって翻訳されています。原文を確認するには、 ここをクリックしてください
この実験では、参加者はCSS3トランジションの力強い世界を探求し、タイミング関数とトランジションプロパティを使ってスムーズでダイナミックなビジュアルエフェクトを作成する方法を学びます。この実験では、基本的なHTMLとCSSプロジェクトのセットアップから高度なトランジションアニメーションの実験まで、CSSトランジションをどのように実装し操作するかを理解するための包括的な実践的アプローチを提供します。
参加者はまずHTMLとCSSファイルでプロジェクト構造を作成し、次に徐々にホバーエフェクトを適用し、トランジション構文を理解し、さまざまなタイミング関数を探求します。実践的な演習を通じて、学習者は要素の変換を制御し、インタラクティブなユーザーインターフェイスを作成し、CSS3トランジション技術を使ってウェブデザインに洗練されたビジュアルなインタラクションを追加するスキルを身につけます。
このステップでは、CSS3トランジションを探求するための基本的なHTMLとCSSプロジェクトをセットアップします。簡単なプロジェクト構造を作成し、トランジションエフェクトの準備として初期のスタイリングを追加します。
まず、プロジェクトディレクトリに移動します。
cd ~/projectCSSトランジションプロジェクト用の新しいディレクトリを作成します。
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を開きます。ボックスにホバーすると、以下が見られます。
見られる例:
このステップでは、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%;
}トランジションプロパティを解説しましょう。
transition-property: トランジションするCSSプロパティを指定します。
allを使用すると、すべての変更可能なプロパティにトランジションを適用できます。transition-duration: トランジションにかかる時間を設定します。
transition-timing-function: トランジションの速度曲線を制御します。
linear: 一定の速度ease-in: ゆっくりと始まり、加速するease-out: 速く始まり、減速するease-in-out: 始まりと終わりがゆっくりとする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);
}重要な高度なトランジション技術:
rotateYを使用した3D回転perspectivebackface-visibilityこのアニメーションは以下を示しています。
カードにホバーすると:
この実験では、参加者はインタラクティブなデザイン技術に焦点を当てた包括的なウェブプロジェクトを構築することで、動的なCSS3トランジションを作成する方法を学びます。この実験は、構造化されたHTMLとCSSの環境をセットアップすることから始まり、背景色、境界半径、フレックスボックスレイアウトなどの基本的なプロパティでスタイル付けされた中央のdiv要素を持つ基礎プロジェクトを作成します。
学習の旅は、ホバーエフェクトの実装、トランジションプロパティと構文の探求、そしてスムーズで魅力的なアニメーションを作成するためのさまざまなタイミング関数の実験を通じて進みます。CSSトランジションプロジェクトを体系的に開発することで、参加者は要素のプロパティを操作し、トランジションの仕組みを理解し、微妙な応答型デザイン技術を通じてユーザー体験を向上させる視覚的に魅力的なウェブインタラクションを作成する実践的なスキルを身につけます。
