css3transitionプロパティの詳しい説明

CSS3 トランジションを使用すると、2 つの異なる CSS スタイル間のトランジション効果を作成できます。 transition 属性を使用すると、CSS プロパティがある値から別の値に変換する方法を定義できます。この変更は、マウス イベント (:hover など)、ボタンの押下などによってトリガーされます。

transition 属性の基本的な使用法

CSS3 では、transition 属性は、ある CSS スタイルから別の CSS スタイルに遷移する方法を指定するために使用されます。以下は、transition 属性を使用する基本的な例です。

div{
  width: 50px;
  height: 50px;
  background-color: red;
  transition: width 2s;
}
div:hover{
  width: 150px;
}

上記のコードでは、マウスを div 要素の上に置くと、div 要素の幅が 50px から 150px に変換され、トランジション効果が変化します。 2秒間続きます。

transition 属性の詳細な構文

transition 属性の構文は次のとおりです:

transition: [property] [duration] [timing-function] [delay];

その内:

[プロパティ]: 一時的な CSS プロパティ名。カンマで区切られた単一のプロパティまたは複数のプロパティにすることができます。

[期間]: 遷移の期間を秒 (s) またはミリ秒 (ms) 単位で指定します。

[timing-function]: 遷移の時間関数を指定します。これには、ease、linear、ease-in、ease-out、ease-in-out、cubic-bezier() を指定できます。

[遅延]: トランジションの実行が開始されるまでの遅延時間を秒 (s) またはミリ秒 (ms) 単位で指定します。

上記の構文に基づいて、transition 属性を通じてより複雑なトランジション効果を定義できます。

トランジション属性の値

トランジション属性のオプション値とデフォルト値は次のとおりです:

[プロパティ]: CSS プロパティ名 (高さ、幅、背景色など)。

[期間]: 時間 (1 秒、3.5 秒、500 ミリ秒など)、デフォルト値は 0 秒

[timing-function]: 時間関数 (linear、ease、ease-in、ease-out、ease-in-out、cubic-bezier など)。デフォルト値は easy です。

[遅延]: 1 秒、3.5 秒、500 ミリ秒などの時間。デフォルト値は 0 秒です。

transition-timing-function 属性

transition-timing-function 属性は、遷移の時間関数を指定するために使用されます。 CSS プロパティ値が開始値から終了値までどのようにスムーズに移行するかを決定します。一般的な時間関数には次のものがあります。

linear: 一定速度のイージング、つまり均一な動き

ease: デフォルト値。ゆっくりと開始し、途中ですぐに変更し、最後に再び速度を落とします

イーズイン: ゆっくり開始

イーズアウト: ゆっくり終了

イーズイン- out: ゆっくり開始して終了

cubic-bezier: カスタム時間関数

transition-delay プロパティ

transition-lay プロパティは、次の指定に使用されます。トランジションエフェクトのディレイタイム。つまり、トランジションエフェクトがトリガーされてから実行を開始するまで待機する時間です。遅延値が指定されている場合、トランジション エフェクトはトリガー後、指定された時間の遅延後に実行を開始します。

遷移属性の例

遷移属性の例をいくつか示します:

遷移元

div{
  width: 50px;
  height: 50px;
  background-color: red;
  transition: width 2s;
  transform-origin: top;
}
div:hover{
  width: 150px;
  transform: rotate(45deg);
}

上記のコードでは、マウスを上に置くと、 div 要素を使用すると、div 要素の幅が 50px から 150px に遷移し、この遷移効果は 2 秒間持続します。同時に、div 要素が上部を中心に 45 度回転します。

複数の属性

div{
  width: 50px;
  height: 50px;
  background-color: red;
  transition: width 2s, height 2s, background-color 2s;
}
div:hover{
  width: 150px;
  height: 150px;
  background-color: blue;
}

上記のコードでは、div 要素の上にマウスを置くと、div 要素の幅、高さ、背景色が同時に変化し、トランジションが変化します。効果は2秒間持続します。

カスタム時間関数

div{
  width: 50px;
  height: 50px;
  background-color: red;
  transition: width 2s cubic-bezier(0.1, 0.7, 1.0, 0.1);
}
div:hover{
  width: 150px;
}

上記のコードでは、マウスが div 要素の上にあると、div 要素の幅が 50px から 150px に変換され、トランジション効果が持続します。 2秒間。同時に、 cubic-bezier() を使用して時間関数をカスタマイズし、トランジション効果をよりパーソナライズしました。

概要

CSS3 トランジション効果は非常に強力で、transition 属性を通じてさまざまな複雑なトランジション効果を定義できます。トランジションに関する関連知識を習得することで、Web ページのアニメーション効果をよりカラフルな方法でデザインできるようになります。

以上がcss3transitionプロパティの詳しい説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。