まえがき

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);}...

ログイン後にコピー

ページを更新して効果を観察してください。アニメーションの実行中に非常に遅い動きがあり、その前後の速度は同じであることがわかります。このときのモーションカーブは次のとおりです。