CSS 3はtransition属性を用いて遷移効果を実現する

Transitionプロパティの目的は、backgroundなどのcssのいくつかのプロパティをスムーズな遷移の効果で表示させることです.これは、次の4つのアトリビュートを組み合わせたマージアトリビュートです.

transition-property:backgroundなどの移行を適用するCSSプロパティを設定します.

transition-duration:遷移効果を設定するのにかかる時間.デフォルトは0です.

transition-timing-function:遷移効果の時間曲線を設定します.デフォルトはeaseです.

transition-delay:移行効果がいつ開始されるかを指定します.デフォルトは0です.

例:
?
1
2
3
4 button{     transition: background 1 s;     -webkit-transition: background 1 s; /* Safari */ }
transitionプロパティを定義する場合、transition-propertyとtransition-durationは必須で、他の2つはオプションです.
transition-propertyとtransition-duration css 3アニメーション
Transition-propertyは、遷移効果を適用するCSSプロパティを指定します.これらのプロパティには、次のものが含まれます(不完全かもしれません):

width

height

color

background (color, image, position)

transform (in the next post)

border (color, width)

position (top, bottom, left, right )

text (size, weight, shadow, word-spacing)

margin

padding

opacity

visibility

z-index

all

Transition-durationプロパティは、指定したプロパティの遷移効果を設定するのに時間がかかります.秒(s)またはミリ秒(ms)です.
transition-delayとtransition-timing-function
Transition-delayは、移行効果の開始時間を設定するために使用されます.デフォルトは0で、秒(s)またはミリ秒(ms)css 3マウスが通過することができます.transition-delayが負数の場合、遷移効果が事前に開始されたことを示します.
Transition-timing-functionは、次のような遷移の効果を設定します.

ease-開始が遅く、中間が速く、終了が遅い

ease-in-漸入効果、遅入速出

ease-out-漸出効果、早入遅出.

ease-in-out-開始が遅いと終了が遅い

cubic-bezier(n,n,n,n)-cubic-bezier関数で独自の値を定義します.可能な値は0から1の間の値

です.
例:
?
1
2
3
4 button{    transition: background 1 s ease-in-out 2 s;    -webkit-transition: background 1 s ease-in-out 2 s; /* Safari */ }
マルチプロパティ
複数のアトリビュートの場合、各アトリビュートの効果はカンマで区切られます.
?
1
2
3
4 button{     transition: background 1 s ease-in-out 2 s, width 2 s linear;     -webkit-transition: background 1 s ease-in-out 2 s, width 2 s linear; /* Safari */   }
互換性
Internet Explorer 10、Firefox、Opera、Chromeはtransitionプロパティをサポートします.
Safariは、代替の-webkit-transitionプロパティをサポートします.
Internet Explorer 9以降のブラウザではtransitionプロパティはサポートされていません.
トリガ
遷移効果は、hover、:focus、and:activeなどのトリガによって適用される前に属性が定義されている必要があることに注意してください.
転載先:https://www.cnblogs.com/good10000/p/10583695.html