web-dev-qa-db-ja.com

CSSの3次ベジェ遷移プロパティを理解する

私はいくつかのスライドとメニューを含むdivを持っています。

#wrap {
    position: relative;
    top: 0;
    transition: top 1.4s cubic-bezier(.49,.22,.52,1.35);
}
<div id="wrap"></div>

遷移プロパティがここで何をするのか誰かが私に説明できますか？

それがdivに与える影響を理解できません。

csscss-transitionsbeziercubic-bezier
23
UnderTaker

あなたの質問に答える

そのプロパティは_<div id="wrap"></div>_のアニメーション用です。

これは、topプロパティを使用してアニメーション化することを意味します！

そして効果のために：それはこれは遷移効果になりますのように跳ね返ります

CSSキュービックベジェを理解する

それは4つのパラメータを取ります：

_cubic-bezier(P1x,P1y,P2x,P2y)
_

pointscubucB

これらは何をしますか？

さて、これらは点にマッピングされ、これらの点はベジェ曲線の一部です。

  • したがって、4つのポイントがありますが、関数はP1とP2に対応するX値とY値のみを記述していますか？

  • CSSベジェ曲線の場合、P0とP3は常に同じ場所にあります。 P0は（0,0）にあり、P3は（1,1）にあります。注意すべき重要な点は、3次ベジェ関数で渡されるポイントは0から1の間のみであるということです。したがって、cubic-bezier(2,3,5,2)のようなものを試すことにした場合、線形イージングに追放されます。 、すべてのイージング機能の中で最悪。これは、ComicSansにフォールバックするフォントファミリーのようなものです。

  • また、x軸はアニメーションにかかる時間であり、y軸は変更されるプロパティであることに注意してください。上のグラフに基づいて、最初はすばやく緩和し、途中で減速し、最後に速度を上げることを視覚化できます。

便利なリンク

43
eirenaios

それがどのように機能するかを理解したばかりの誰かによるキュービックベジェ関数の別の説明を提供したいと思います。 https://freecodecamp.org のチュートリアルを実行しているときに、問題が発生しました。 eirenaios で前の答えを読み、キュービックベジェビルダーを使用した後、それを把握しました。

私のブログに投稿

  1. ベジェ曲線は、P0、P1、P2、およびP3の4つのポイントに基づいています。 P0はデフォルトで（0、0）に設定され、P3はデフォルトで（1、1）に設定されます。

  2. 曲線は、ポイントP1とP2に指定する座標に応じて異なるストレッチをします。

    キュービックベジェの例

上記の例では、P1は（0.1、0.1）に設定され、P2は（1、0）に設定されています。アニメーションの速度は、特定の時間ごとに状態がどの程度変化するかによって異なります。この例では、アニメーションは時間とともに速くなります。アニメーションに使用される時間の前半では、距離の約15％をカバーします（時間= 0.5、状態〜0.15の場合）。後半は残り85％の距離をカバーします。

Jsfiddleの例をチェックして、アニメーションが実際にどのように機能するかを確認してください。 cubic-bezier ballアニメーション

HTML：

<div class="ball"></div>

CSS：

.ball{
  background: red;
  border-radius: 50%;
  position: fixed;
  width: 50px;
  height: 50px;
  top: 50%;
  animation-name: bounce;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(.10, .10, 1, 0);
}

@keyframes bounce {
  0% {
    left: 0%;
  }
  100% {
    left: 100%;
  }
}

この例では、ボールは4秒間で画面の左端から右端に移動します。キーフレームは、アニメーションの開始位置と終了位置を設定するためにあり、animation-timing-function：cubic-bezier（）は、さまざまな時点でのアニメーションの速度を設定します。

4
Tomasz Makowski