ホームページ > 記事 > ウェブフロントエンド > 便利なCSS
便利なCSS
- WBOYオリジナル
- 2016-06-21 08:54:18941ブラウズ
まえがき
cubic-bezier を理解する前に、animation-timing-function とtransition-timing-function の重要な内容である CSS3 のアニメーション効果を理解する必要があります。
オントロジー
概要
cubic-bezier は、cubic Bezier とも呼ばれ、主にアニメーション用のスピード カーブを生成する関数です。 cubic-bezier(
次の図から 3 次ベジェを簡単に理解できます:
何から上の図で知っておく必要があるのは、3 次ベジェの値の範囲です:
- P0: デフォルト値 (0, 0)
- P1: 動的値 (x1) , y1)
- P2: 動的値 (x2, y2)
- P3: デフォルト値 (1, 1)
注意が必要なのはP1とP2の値で、X軸の値の範囲は0から1のときです。値が超過 範囲を超過すると、3 次ベジェは失敗します。Y 軸の値が指定されていない場合、もちろん、値が大きすぎる必要はありません。
最も直接的な理解は、 を座標軸上に 1 の範囲のみの直線として配置し、その中間から 2 点を抜き出すことです (X 軸の値の範囲は [ 0, 1]、Y 軸は任意）、形成された最終的な曲線がアニメーション の速度曲線です。
の使用 テスト例:
<!DOCTYPE html><html lang="zh-cn"><head> <meta charset="UTF-8"> <title>Document</title> <style> .animation { width: 50px; height: 50px; background-color: #ed3; -webkit-transition: all 2s; -o-transition: all 2s; transition: all 2s; } .animation:hover { -webkit-transform: translateX(100px); -ms-transform: translateX(100px); -o-transform: translateX(100px); transform: translateX(100px); } </style></head><body> <div class="animation"></div></body></html> マウスを要素上に移動すると、要素が右に移動し始めることがブラウザで確認できます。 , 最初はゆっくりと動きますが、離れると元のカーブに従って原点に戻ります。
この例では、三次ベジェまたは他のタイミング関数をトランジションに追加しない場合、デフォルトの速度曲線は次のとおりです。
次に、cubic-bezier(.17, .86, .73, .14) をコードに追加しましょう:
....animation { ... -webkit-transition: all 2s cubic-bezier(.17, .86, .73, .14); -o-transition: all 2s cubic-bezier(.17, .86, .73, .14); transition: all 2s cubic-bezier(.17, .86, .73, .14);}... ページを更新して効果を観察してください。アニメーションの実行中に非常に遅い動きがあり、その前後の速度は同じであることがわかります。このときのモーション カーブは次のとおりです。
一般的に使用されるいくつかの固定値は、3 次ベジェ値と速度曲線に対応します
-
ease: cubic-bezier(.25, .1, .25, 1)
-
ライナー: cubic-bezier(0, 0, 1, 1) / cubic-bezier(1, 1, 0, 0)
-
イーズイン: cubic-bezier(.42, 0, 1, 1)
-
イーズアウト: cubic-bezier(0, 0, .58, 1)
-
イーズインアウト: cubic-bezier(.42, 0, .58, 1)
-
In Out . Back (前後のバッファリング効果): cubic -bezier(0.68, -0.55, 0.27, 1.55)
エフェクトのリファレンス
記事内で触れたアニメーション その効果は以下のサイトで見ることができます、もちろん大胆に試すこともできます:
- 英語版オンラインプレビュー (Lea Verou)
- 中国語版のオンライン プレビュー (その他の効果)
- オンラインでシリーズを生成
- 著者の「読み込み中」ライブラリ
リファレンス
MDNW3School