cubic-bezier を理解する前に、animation-timing-function とtransition-timing-function の重要な内容である CSS3 のアニメーション効果を理解する必要があります。
cubic-bezier は、cubic Bezier とも呼ばれ、主にアニメーション用のスピード カーブを生成する関数です。 cubic-bezier(
次の図から 3 次ベジェを簡単に理解できます:
何から上の図で知っておく必要があるのは、3 次ベジェの値の範囲です:
注意が必要なのは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);}...
ページを更新して効果を観察してください。アニメーションの実行中に非常に遅い動きがあり、その前後の速度は同じであることがわかります。このときのモーション カーブは次のとおりです。
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)
記事内で触れたアニメーション その効果は以下のサイトで見ることができます、もちろん大胆に試すこともできます:
MDNW3School