トランジション属性を使用してトランジション効果を実現する CSS3 について

CSS3の新しいtransform属性は、変換プロセス中の要素のトランジション効果を実現し、基本的なアニメーションを実現できます。この記事では、CSS3 がトランジション属性を使用してトランジション効果を実現する方法を紹介します。必要な方はこの記事を参照してください

属性の詳細な説明

トランジション属性の目的は、いくつかの CSS 属性を作成することです。 (背景など) が滑らかなトランジション効果で表示されます。これは結合されたプロパティであり、次の 4 つのプロパティで構成されます:

• transition-property: 背景など、アプリケーションのトランジションの CSS プロパティを設定します。

• transition-duration: トランジション効果にかかる時間を設定します。デフォルトは 0 です。

• transition-timing-function: トランジション効果のタイムカーブを設定します。デフォルトは「簡単」です。

• transition-lay: トランジション効果がいつ開始されるかを指定します。デフォルトは 0 です。

例:

 button{
    transition: background 1s;
    -webkit-transition: background 1s; /* Safari */
 }

transitionプロパティを定義する場合、transition-propertyとtransition-durationは必須で、他の2つはオプションです。

transition-property とtransition-duration

transition-property は、トランジション効果を適用するための CSS プロパティを指定するために使用されます。これらのプロパティには、次のものが含まれます (不完全な場合があります)。

• 色

• 背景（色、画像、位置）

• 変換（次の投稿で）

• 境界線（色、幅）

• 位置（上、下、左、右)

• テキスト (サイズ、太さ、影、文字間隔)

• マージン

• パディング

• 不透明度

• 可視性

• z-index

• all

• transition-duration 属性は、指定された属性のトランジション効果時間を設定するために使用されます。秒 (s) またはミリ秒 (ms) を指定できます。

• transition-lay とtransition-timing-function

transition-lay は、トランジション効果が開始される時間を設定するために使用されます。デフォルトは 0 で、秒 (s) またはミリ秒 (ms) です。遷移遅延が負の数の場合、遷移効果が早く開始されることを意味します。

transition-timing-function はトランジション効果を設定するために使用されます: ease - 最初は遅く、中間は速く、最後は遅く

イーズイン - フェードイン効果。 、スローインとファストアウト

• イーズアウト - フェードアウト効果、ファストインとスローアウト。 n,n,n) - 三次関数 - ベジェ関数で独自の値を定義します。可能な値は 0 と 1 の間の数値です

• 例:

•  button{
     transition: background 1s ease-in-out 2s;
     -webkit-transition: background 1s ease-in-out 2s; /* Safari */
   }

• 複数の属性

• 複数の属性の場合、各属性の効果はカンマで区切られます:

  button{
     transition: background 1s ease-in-out 2s, width 2s linear;
     -webkit-transition: background 1s ease-in-out 2s, width 2s linear; /* Safari */
   }

互換性

Internet Explorer 10、Firefox、Opera、Chrome は、transition 属性をサポートしています。 Safari は、代替の -webkit-transition プロパティをサポートしています。

Internet Explorer 9 以前のブラウザは、transition 属性をサポートしていません。

Trigger

トランジション効果には、:hover、:focus、:active などのトリガーを通じて適用される属性が必要であることに注意してください。 上記がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。

関連する推奨事項:

CSS3 を使用して絶えず変化するテキストシャドウ効果を実現する方法

シンプルなスライドショーカルーセル効果を実現する CSS3 アニメーション

以上がトランジション属性を使用してトランジション効果を実現する CSS3 についての詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。