ホームページ > 記事 > ウェブフロントエンド > css3移行メモ_html/css_WEB-ITnose
css3移行メモ_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:40:54889ブラウズ
CSS3 Transition
CSS3 トランジションを使用すると、CSS プロパティ値を一定の時間間隔内でスムーズに遷移させることができます。この効果は、マウスのクリック、フォーカス、クリック、または要素への変更によってトリガーされ、CSS プロパティ値をスムーズにアニメーション化します。
transition:[<transition-property> || <transition-duration> || <transition-timing-function> || <transition-delay>]
transition-property: トランジションの CSS プロパティを指定します。
transition-duration: 移行が完了するまでに必要な時間を指定します。
transition-timing-function: 遷移速度調整関数を指定します。
transition-lay: トランジションが開始されるまでの遅延時間を指定します。
transition 属性は、border 属性や font 属性と似ており、省略したり、別々に記述したりできます。省略する場合、各機能はスペースで区切られ、特定の順序で配置する必要があります。さらに、複数のトランジション属性を操作する場合は、それらをカンマで区切ります。以下の通り:
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title></title><style> div{ width:50px; height:100px; background:#ffd800; /*分开使用transition的扩展属性*/ transition-property:width,height,background; transition-duration:1s; transition-timing-function:ease; transition-delay:.2s; /*使用transition简写属性*/ transition:width 1s ease .2s,height 1s ease .2s,background 1s ease .2s; } div:hover{ width:100px; height:50px; background:#00ff90; }</style></head><body> <div></div></body></html> transition-property 構文:
transition-property:no | all | <single-transition-property> [, <single-transition-property>] *
none: スタイルは指定されていません。
All: デフォルト値。transition-property 属性をサポートする、指定された要素のすべてのスタイルを示します。
da4f8b2de492cd89d973df68dcca8a96: 1 つ以上のスタイルを指定します。
すべてのスタイルがトランジションのトランジション プロパティを適用できるわけではありません。色、長さ、グラデーションなどのトランジション効果を適用できるのは、中間値を持つスタイルのみです。
transition-duration syntax
transition-duration:<time> [,<time>] *
46dd80ba616c57a652514755c74c4211 は数値で、単位は s (秒) または ms (ミリ秒) で、デフォルト値は 0 です。複数の遷移属性がある場合、複数の遷移時間を設定してそれぞれの遷移属性を適用することも、1 つの遷移時間を設定してすべての遷移属性を適用することもできます。
transition-timing-function syntax
transition-timing-function:<single-transition-timing-function> [,<single-transition-timing-function>] *
Single transition function
ff090e1dc4fab42543f9679c8cd9fa30 は、主に次の属性値を含む単一の遷移関数を指します。
ease: デフォルト値、要素スタイルが初期状態から終了状態に遷移するとき、速度は速いから遅いまで徐々に遅くなります。
Linear: 要素スタイルは初期状態から最終状態まで一定の速度で遷移します。
ease-in: 要素スタイルが初期状態から終了状態に遷移するとき、速度がどんどん速くなり、加速された状態を示します。この効果をフェード効果と呼びます。
ease-out: 要素スタイルが初期状態から終了状態に遷移するとき、速度がどんどん遅くなり、減速状態を示します。この効果をフェード効果と呼びます。
ease-in-out: 要素スタイルが初期状態から終了状態に変化するとき、最初に加速し、次に減速します。この効果をフェードイン効果と呼びます。
Cubic Bezier Curve: より正確な遷移関数を定義するために使用されます。
3 次ベジェ曲線を定義するための構文は次のとおりです:
cubic-bezier(p0,p1,p2,p3)
各ポイント値には 0% から 100% に相当する 0 から 1 の値のみが許可されます。p0 と p3 の値は次のとおりです。これらは常に始点座標 (0 ,0) と終点座標 (1,1) を表します。したがって、p1とp2のポイント値を設定するだけで済みます。
は、オンラインの 3 次ベジェ ツールを使用してシミュレーションおよび実装できます。
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title></title><style> div{ width:50px; height:100px; background:#ffd800; transition-property:width,height,background; transition-duration:1s; /*定义了三次贝塞尔曲线函数，p1的坐标是(.57,.07),p2的坐标是(.69,.16)*/ transition-timing-function:cubic-bezier(.57,.07,.69,.16); transition-delay:.2s; } div:hover{ width:100px; height:50px; background:#00ff90; }</style></head><body> <div></div></body></html>steps()関数:操作フィールド全体を同じサイズの間隔に分割するために使用され、各間隔は等しいです。
steps(<integer> [, [start | end]]?)
最初のパラメータは数値で、主にsteps()関数の間隔数を指定するために使用されます。この値は0より大きい正の整数でなければなりません。
2番目のパラメータはオプションで、デフォルト値はendです。
Transition-timing-function:steps (3, start);
アニメーションのステップ効果は各ステップの先頭からジャンプするので、ステップは3/1になります。 3/2、3/3 。
Transition-timing-function:steps (3, end);
アニメーションのステップ効果は各ステップの最後からジャンプするので、ステップは0、3ということになります。 /1、3/2。
transition-lay 構文
transition-delay:<time> [, <time>] *
Transition-lay: アニメーションの実行開始時間、つまり、要素の属性値を変更してからトランジション効果の実行を開始するまでにかかる時間を指定するために使用されます。正の値にすることもできます。整数、負の整数、および 0。ゼロ以外の場合、単位は s (秒) または ms (ミリ秒) に設定する必要があります。
正の整数の場合は、わかりやすい、つまり、遷移の開始が数秒遅れます。負の整数の場合、要素の前回の時間、つまり、に使用された値が切り捨てられます。遷移時間から遷移遅延の遅延値を差し引いた値の間の値は発生せず、遷移の残りの値に直接ジャンプします。
CSS3 トランジションの基本的な知識はすでに習得しています。簡単に言うと、それは 4 つの値を持つ 1 つの属性です。次に、コードを数回入力して各値の効果を体験するだけで理解できるようになります。 。