CSS3 のトランジションプロパティの詳細

2年 ago
優斗, 朝陽
1 minute

CSS3のtransitionプロパティは、時間の経過につれて要素の遷移効果を設定するために使用されます。 それにより、要素の異なる状態間でスムーズに遷移することができ、より流動的なページアニメーションを実現できます。

transition プロパティの構文:

transition: property duration timing-function delay;
  1. プロパティ：トランジションされるCSSプロパティを指定します。1つ以上のプロパティを指定でき、カンマで区切ります。
  2. デュレーション：指定されたトランジションの継続時間を秒（s）またはミリ秒（ms）で指定。
  3. timing-function：遷移の速度曲線を指定します。あらかじめ定義された値（ease、linear、ease-in、ease-out、ease-in-out）や、カスタムのベジェ曲線を使用できます。
  4. 遅延：指定した時間（秒（s）またはミリ秒（ms））後に遷移を開始します。

よく使われる transform プロパティの値とその例を以下に示します。

  1. transition-property: なめらかに遷移させるプロパティを指定します。 all（すべてのプロパティ）、none（プロパティなし）、または具体的なプロパティ名にすることができます。
  2. transition-duration: 指定した遷移時間。例：0.3s、500ms
  3. トランジションタイミング関数: ease、linear、ease-in、ease-out、ease-in-out など、一定の速度のカーブを指定します。
  4. 指定された遷移を開始する前の遅延時間を設定します。例: 0.3s、500ms

以下の例は、transition プロパティを使用して要素の色遷移効果を実現する方法を示しています。

.box {
background-color: red;
transition: background-color 1s ease-in-out;
}
.box:hover {
background-color: blue;
}

上記の例では、マウスポインタが要素.box上に置かれると、1秒かけて滑らかに背景色が赤から青に変化し、速度曲線はイーズインアウトされます。

簡単に言うと、transitionプロパティはCSS3で要素の遷移効果を設定するために使うプロパティで、遷移するプロパティ、持続時間、速度カーブ、遅延時間などを制御することで、さらにスムーズなページアニメーション効果を実現できます。

bannerAds