CSSでトランジションを使う方法

CSS のtransition プロパティを使用すると、ある状態から別の状態に遷移する要素の視覚効果を制御できます。使用法: トランジションのプロパティ (色、サイズ、位置など) を指定します。 トランジション アニメーションの継続時間を設定します (秒またはミリ秒単位)。 イージング関数を選択します (速度と加速度を制御します)。 トランジションの遅延を設定します (アニメーションを開始するまでの待機時間)。アニメーション)

CSS でのトランジションの使用

CSS のトランジション プロパティを使用すると、要素のトランジションを制御できます。ある状態から別の視覚効果へ。具体的には、トランジションは、要素がそのプロパティの変更に費やす時間、トランジション アニメーションのタイプ (つまり、イージング関数)、トランジションの完了時に適用される遅延を決定します。

使用法

CSS でトランジションを使用するには、次の構文を使用します:

<code class="css">transition: property duration timing-function delay;</code>

ここで:

• property: トランジション効果が適用される CSS プロパティ (色、サイズ、位置など)。
• duration: 遷移アニメーションの継続時間 (秒またはミリ秒)。
• timing-function: アニメーションの速度と加速を制御する、トランジション アニメーションのイージング関数について説明します。
• lay: トランジション アニメーションが開始する前に適用する遅延 (秒またはミリ秒)。

たとえば、次のコードは、遷移時間が 1 秒で青から赤に遷移し、イーズインアウトイージング関数を使用するボタンを作成します。

イージング関数

イージング関数は、トランジション アニメーションの速度と加速度を指定します。 CSS には、次のような事前定義されたさまざまなイージング関数が用意されています。

linear
• : 均一な速度
ease
• : ゆっくりと開始し、その後加速
イーズイン
• : 開始が遅い
イーズアウト
• : 終了が遅い#イーズインアウト
:イーズインとイーズアウトの組み合わせ
• ##カスタム イージング関数を使用して、より高度な効果を作成することもできます。
Delay

Delay プロパティは、要素がプロパティを変更するまで待機する時間を制御します。これを使用して、ラグ効果を作成したり、複数の要素への遷移を同期したりできます。

注意事項

デフォルトでは、遷移は要素の宣言されたプロパティにのみ適用されます。 キーワード

all

を使用すると、要素の宣言されたすべてのプロパティに遷移を適用できます。
• ブラウザはさまざまなバージョンの遷移属性をサポートしているため、コードをテストしてブラウザ間の互換性を確認することが重要です。

以上がCSSでトランジションを使う方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。