Transition遷移

1：基本概念

一定時間スムーズなトランジション、すなわちスムーズにアニメーション効果でcssのプロパティ値を変更します.その移行は、マウスのクリック、フォーカスの取得、または失われ、クリックされたイベント、または要素の変更によってトリガーされます.アクティブにトリガすることはできません.パッシブにトリガするしかありません.
一般的な基本プロパティは、Transition-duration(トランジション時間)、Transition-property(トランジションCSSプロパティ名)、Transition-delay(トランジション開始時間)、ベッセル曲線、Transition-timing-function(トランジション効果時間曲線)、Transition(略記設定の4つのプロパティ)です.

2:ブラウザ互換性

3：Transition-duration

トランスition-propertyと組み合わせて同時に使用する必要があります.使用するには、遷移の属性を指定する必要があります.既定値は0です.

transition-duration: s | ms;

4：Transition-property

transition-durationと組み合わせて同時に使用する必要があります.デフォルトはallです(すべてのアトリビュートが遷移効果を取得します).それ以外にTransition-durationの値はnone(トランジション効果なし)、property(特定の属性がトランジション効果を得、複数の属性がカンマで区切られている)でもよい.
すべてのCSS属性がtransition-property:allをサポートしているわけではありません.サポートされているのは明確な臨界があります.

background-color、background-position
border-color、border-width、border-spacing
clip
color
crop
font-size、font-weight
height、width、line-height
right、left、bottom、top
margin、padding
max-height、max-width、min-height、min-width
outline-color、outline-offset、outline-width
text-indent、text-shadow、vertical-align、word-spacing、letter-spacing
visibility
opacity
z-index

5:Transition-delay(変換を実行するためにどれくらい遅延するか)

transition-delay: s | ms;

6:ベッセル曲線

2 2 2 Dグラフィックスアプリケーションに適用される数学曲線

ベッセル曲線

を描く

関数形式のベッセル曲線

一次ベッセル曲線

二次ベッセル曲線

三次ベッセル曲線

cubic-bezier(n1, n2, n3, n4)

P0 (0, 0)

P1 (1, 1)

P2 (n1, n2)

P3 (n3, n4)

曲線上の点の接線の傾きに対応する運動速度

http://cubic-bezier.com/-cubic-bezier編集の可視化

7:Transition-timing-function(時間遷移曲線)

transition-timing-function: linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n1, n2, n3, n4);

デフォルトease

n 1、n 2、n 3、n 4の値を取り、公式推奨(0-1)

linear-同じ速度で遷移-cubic-bezier(0,0,1,1)/cubic-bezier(1,1,0,0)

ease-低速開始->高速化->低速終了-cubic-bezier(0.25,0.1,0.25,1)

ease-in-低速開始-cubic-bezier(0.42,0,1,1)

ease-out-低速終了-cubic-bezier(0,0,0.58,1)

ease-in-out-低速開始、低速終了、振幅がeaseより大きい-cubic-bezier(0.42,0,0.58,1)

cubic-bezier(n,n,n,n)-カスタム速度関数(nは0と1)

8：限界とメリット

利点:簡単で使いやすい;
制限:

transitionはイベントトリガが必要なので、Webページでロードできないのは自動的に発生します.すなわち,自発的にトリガすることはできず,受動的にトリガするしかない.

transitionは、繰り返しトリガしない限り、一度に発生することはできません.

は、開始および終了の属性値のみを定義し、中間状態、すなわち2つの状態のみを定義することはできません.

この文章は主にTransitionの基本概念、Transitionに関する数学の基礎を分かち合い、その上でduration、property、delay、timing-functionの常用属性を紹介し、Transitionの長所と短所をまとめた.