css3アニメーション属性遷移(変換)_html/css_WEB-ITnose

CSS3 トランジションを使用すると、CSS 属性値を一定の時間間隔内でスムーズに遷移できます。

文法:

transition ： [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'> [, [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'>]]* 

transition には主に 4 つの属性値が含まれます: transition-property (変換プロパティ)、transition-duration (変換継続時間)、transition-timing-function (継続時間、変換の速度変化)、transition-delay (変換遅延時間)。

transition-property:

要素の属性の 1 つが変更されたときにトランジション効果が実行されることを指定します。主に次の値があります: none (属性は変更されない)、all (すべての属性が変更される)。これはデフォルト値でもあります。 ;indent (要素の属性名)。値が none の場合、all に指定すると、要素の属性値が変更されたときにトランジション効果が実行されます。要素の特定の属性値を指定できます。すべての属性変更がトランジション アクション効果をトリガーするわけではありません (ブラウザーがページの幅を変更する場合など、トランジション エフェクトはトリガーされません)。

transition-duration:

要素変換プロセスの継続時間を指定します。値: 単位は s (秒) または ms (ミリ秒) で、適用できます。疑似要素の前後を含むすべての要素に適用されます。 のデフォルト値は 0 で、これは変換が即時であることを意味します。

transition-timing-function:

transition-timing-function の値により、時間の進行に応じて属性値の変換速度を変更できます。transition-timing-function には 6 があります。可能な値:

1, ease: (徐々に遅くなります) デフォルト値、イーズ関数はベジェ曲線 (0.25、0.1、0.25、1.0) と同等です。
2. linear: (一定速度) 、線形関数はベジェ曲線 (0.0, 0.0, 1.0, 1.0) と同等です。
3. イーズイン: (加速度)、イーズイン関数はベジェ曲線 (0.42, 0, 1.0) と同等です。 , 1.0).
4. ease-out : (減速)、ease-out 関数はベジェ曲線 (0, 0, 0.58, 1.0) と同等です。
5. ease-in-out: (加速してから減速する)、イーズインアウト関数はベジェ曲線 (0.42、0、0.58、1.0) と同等です。
6. cubic-bezier: (この値により時間曲線をカスタマイズできます)、特定の 3 次ベジェ曲線。 4 つの値 (x1、y1、x2、y2) は、曲線上の点 P1 および P2 に固有です。すべての値は [0, 1] の範囲内にある必要があります。そうでない場合は無効になります。図に示すように:

transition-delay:

アニメーションの実行を開始する時間、つまり、要素の属性値を変更してからトランジション効果の実行を開始するまでの時間を指定します。その値: は数値で、単位は s (秒) または ms (ミリ秒) です。その使用方法は、transition-duration と非常に似ており、:before および :before を含むすべての要素にも適用できます。 :疑似要素の後。 デフォルトのサイズは 0 です。これは、変換が遅延なく直ちに実行されることを意味します。

ユースケース:

rree