トランジション属性を使用してトランジション効果を実現する CSS3 について-CSSチュートリアル-php.cn

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

不言

リリース： 2018-06-20 18:05:12

オリジナル

2441 人が閲覧しました

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 サイトをご覧ください。