CSSトランジション

Webページをデザインするときに、要素にトランジションを追加することをお勧めします。遷移は、特定の条件が満たされたときにトリガーされます。たとえば、ユーザーがボタンにカーソルを合わせたときにボタンの背景色を変更したい場合があります。

CSSトランジションプロパティとそのサブプロパティを使用して、HTML要素のプロパティが変更されたときにアニメーション効果を作成できます。

このチュートリアルでは、いくつかの例を使用して、CSSトランジションの基本と、transitionプロパティを使用してCSSアニメーションを作成する方法について説明します。このチュートリアルを終えると、CSSトランジションとトランジションプロパティの操作に精通するようになります。

CSSトランジション

デフォルトでは、CSSプロパティの値が変更されると、Webページはその変更を即座に適用します。

たとえば、カーソルがボタンの上にあるときにアクティブになるスタイル変更を作成した場合、ユーザーがカーソルでボタンの上にカーソルを置くとすぐに新しいスタイルが適用されます。ユーザーのカーソルがボタンから離れるとすぐに、ボタンは即座にデフォルトのスタイルに戻ります。

CSSトランジション機能は、2つのスタイル間のスムーズなトランジションを作成するために使用されます。遷移プロパティを使用すると、Webページは2つのスタイル間の変更をアニメーション化します。この機能を使用すると、より見た目に美しいスタイルの変更を作成できます。

CSSトランジションには2つのコンポーネントがあります。これらは：

• 要素に適用する新しいCSSプロパティ。
• 移行期間。

デフォルトでは、遷移の継続時間は0秒に設定されています。つまり、期間を定義しない場合、指定したトランジションは効果がありません。つまり、スタイルの変更は即座に行われます。

参加者の81％は、ブートキャンプに参加した後、自分たちの技術的な仕事の見通しについてより自信を持っていると述べました。今日のブートキャンプにマッチしましょう。

平均的なブートキャンプの卒業生は、ブートキャンプの開始から最初の仕事を見つけるまで、キャリアの移行に6か月も費やしませんでした。

CSS移行の例

Webサイトのボタンを設計していて、ユーザーがカーソルでボタンにカーソルを合わせたときにボタンのスタイルを変更したいとします。ユーザーがカーソルでボタンにカーソルを合わせていない場合、ボタンには青い境界線が表示されます。次に、ユーザーがカーソルでボタンにカーソルを合わせると、ボタンの背景色がデフォルトの色（白）から青に変わります。

どちらの状態でも、ボタンの高さは100ピクセル、幅は100ピクセルで、ボタンのテキストは中央に配置されている必要があります。 2つの状態間の遷移には2秒かかります。

このボタンを作成するために使用するコードは次のとおりです。

index.html

<div><p>This is a button.</p></div>

styles.css

div {
	width: 100px;
	height: 100px;
	text-align: center;
	border: solid 3px #33CCFF;
	transition: background-color 2s;
}

div:hover {
	background-color: #33CCFF;
}

私たちのコードは次を返します：

[Code result here]


コードでは、ボタンの幅を100ピクセル、高さを100ピクセルにし、ボタンのコンテンツを中央揃えにする必要があると述べました。また、ボタンに幅3ピクセルの青い実線の境界線を指定しました。

カーソルでボタンにカーソルを合わせると、背景色が青に変わることがわかります。カーソルを離すと、ボタンの背景色が白に戻ります。

この例では、背景色プロパティに2秒の遷移期間を指定しました。つまり、ユーザーがカーソルでボタンにカーソルを合わせると、ボタンの背景色が白から青に完全に変わるまでに2秒かかります。つまり、変化は瞬時ではありません。

同様に、ユーザーがカーソルをボタンから離すと、背景色が2秒間で青から白に変わります。つまり、瞬時ではありません。したがって、ページ上のカーソルの配置に基づいて、新しい背景色との間で2秒間のスムーズな遷移を実現できます。

次に、ユーザーがカーソルでボタンにカーソルを合わせたときにトリガーするスタイルを指定しました。これは、：hoverセレクターを使用して実現しました。プログラムは、ユーザーがカーソルでその要素にカーソルを合わせると、：hoverセレクターで定義されたスタイルを要素に適用します。

CSS：hoverセレクターについて詳しく知りたい場合は、CSS：hoverセレクターのガイドをお読みください。

遷移速度曲線

transition-timing-functionプロパティを使用すると、遷移効果の速度曲線を指定できます。このプロパティで受け入れられる値のいくつかを次に示します。

値（および対応する説明）

transition-timing-functionプロパティの

値	遷移速度曲線の説明
使いやすさ	スロースタート、高速アクセラレーション、スローエンド（デフォルト値）
イーズイン	開始が遅く、次に加速が速い
イーズアウト	速いスタート、次に遅いフィニッシュ
線​​形	開始から終了まで同じ速度
cube-bezier（n、n、n、n）	キュービック-ベジェ遷移

ご覧のとおり、この表の最初の値である「ease」がデフォルト値です。つまり、transition-timing-functionプロパティの値を指定しない場合、またはトランジションのスタイル設定時にプロパティをまったく指定しない場合、Webページはデフォルトでこの値を使用します。

最後の例のコードを使用して、transition-timing-functionプロパティがどのように機能するかを説明しましょう。最後の例では、「簡単な」速度曲線を指定しました。これは、ボタンのスタイルが、開始が遅く、加速が速く、終了が遅いスタイルから別のスタイルに変わることを意味します。

ただし、線形遷移を使用してボタンを新しい背景色に遷移させたいとします。これを行うには、「イーズイン」値を指定します。このためのコードは次のとおりです。

<div><p>This is a button.</p></div>

div {
	width: 100px;
	height: 100px;
	text-align: center;
	border: solid 3px #33CCFF;
	transition: background-color 2s linear 0.5s;
}

div:hover {
	background-color: #33CCFF;
}

私たちのコードは次を返します：

[Result of code]


私たちのスタイルは、前の例で使用したものとほとんど同じです。唯一の違いは、easeを指定する代わりに 遷移では、linearを指定します 遷移。これは、遷移がトリガーされると、遷移の速度が一定に保たれることを意味します。

遷移遅延

transition-delayプロパティを使用すると、トランジション効果の遅延を指定できます。 transition-delayプロパティに割り当てられる値は、秒単位である必要があります。

1秒遅れて、ボタンを新しい背景色に変更したいとします。このタスクは、次のコードを使用して実行できます。

<div><p>This is a button.</p></div>

div {
	width: 100px;
	height: 100px;
	text-align: center;
	border: solid 3px #33CCFF;
	transition: background-color ease-in 0.5s;
	transition-delay: 1s;
}

div:hover {
	background-color: #33CCFF;
}

私たちのコードは次を返します：

[Code result here]


このコードでは、遷移の遅延を1秒に指定しています。したがって、遷移は、ユーザーがボタンの上にカーソルを置き始めてから1秒後まで開始されません。

複数のトランジションを適用する

トランジションを操作しているときに、複数のトランジションエフェクトを実行することを決定する場合があります。

これを行うには、複数のトランジションを指定し、各トランジションをコンマで区切ります。各トランジションには、継続時間、速度曲線、および通常のトランジションが使用するその他の属性を含めることができます。

たとえば、前のボタンの例を見てみましょう。ボタンの背景色を青に変更するだけでなく、ボタンの境界線の色もピンクに変更したいとします。これらは両方とも、ユーザーがカーソルで要素にカーソルを合わせたときに発生するはずです。このタスクを実行するには、次のコードを使用できます。

div {
	width: 100px;
	height: 100px;
	text-align: center;
	border: solid 3px #33CCFF;
	transition: background-color 2s, border 2s;
}

div:hover {
	background-color: #33CCFF;
	border: solid 3px lightpink
}

私たちのコードは次を返します：

[Code result here]


ボタンにカーソルを合わせると、背景色が青に変わり、境界線の色が淡いピンクに変わります。この移行は2秒で完了します。

トランジションのリスト内の各トランジションが表示される順序は、トランジションの表示方法には影響しません。

CSSトランジションロングハンドvsショートハンド

上記の例では、transitionプロパティを使用して遷移のスタイルを設定しました。遷移プロパティは、CSSで遷移を定義するために使用される4つの個別のサブプロパティの省略形です。これらの4つのサブプロパティは次のとおりです。

• 遷移プロパティ ：トランジション効果が適用されるプロパティを設定します。
• 移行期間 ：遷移が続く時間を示します。
• 遷移タイミング関数 ：遷移の速度を定義します。
• 遷移遅延 ：移行の開始を遅らせます。

上記の例を使用して、これらのプロパティがどのように機能するかを示しましょう。青い境界線、デフォルト（白）の背景色、および中央揃えのテキストを使用して100pxx100pxのボタンを作成するとします。ユーザーがカーソルでボタンにカーソルを合わせると、ボタンの背景色が青に変わります。この遷移には2秒かかり、ユーザーがカーソルでボタンにカーソルを合わせ始めてから0.5秒後に開始する必要があります。

このタスクを実行するには、次のコードを使用できます。

<div><p>This is a button.</p></div>

div {
	width: 100px;
	height: 100px;
	text-align: center;
	border: solid 3px #33CCFF;
	transition-property: background-color;
	transition-duration: 2s;
	transition-timing-function: ease;
	transition-delay: 0.5s;
}

div:hover {
	background-color: #33CCFF;
}

私たちのコードは次を返します：

[Code result]


ご覧のとおり、青色の背景色との間で遷移するボタンを作成しました。これらの遷移は、ユーザーがカーソルをボタンの上に置いたときとボタンから離れたときにそれぞれ発生します。

このコードでは、遷移に4つの遷移サブプロパティ（transition-property、transition-duration、transition-timing-function、transition-delay）を指定しました。また、前の例のスタイルを使用して、ボタンの高さ、幅、テキストの配置、および境界線の色を設定しました。

または、遷移の省略形を使用することもできます。省略形を使用すると、以前に使用した4行ではなく、1行のコードでCSS遷移を指定できます。遷移の省略形の構文は次のとおりです。

遷移：遷移プロパティ遷移期間遷移タイミング関数遷移遅延;

上記で指定した値の順序は、トランジションを作成するときに使用する必要のある順序です。

例を使用して、遷移の省略形がどのように機能するかを説明しましょう。トランジションの省略形を使用して以前のボタンを作成するために使用するコードは次のとおりです。

<div><p>This is a button.</p></div>

div {
	width: 100px;
	height: 100px;
	text-align: center;
	border: solid 3px #33CCFF;
	transition: background-color 2s ease 0.5s;
}

div:hover {
	background-color: #33CCFF;
}

私たちのコードは次を返します：

[Code result here]


ご覧のとおり、ここでは前の例と同じスタイルを適用しました。唯一の違いは、個々のサブプロパティをそれぞれの行に一覧表示してトランジションのスタイルを指定するのではなく、代わりにトランジションの省略形を使用したことです。

結論

CSSトランジションプロパティは、スタイル間で発生するトランジションのタイプを定義するために使用されます。遷移プロパティには、transition-property、transition-delay、transition-timing-function、transition-durationの4つの省略形プロパティがあります。これらのサブプロパティを使用して、遷移スタイルの要素を個別に設定できます。

このチュートリアルでは、例を使用して、transitionプロパティとその4つのサブプロパティを使用してCSSで遷移を作成する方法について説明しました。これで、プロのWeb開発者のようにCSSトランジションの作成を開始する準備が整いました！