24

いくつかのスライドとメニューを含む div があります。

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

ここで遷移プロパティが何をするのか、誰か説明してもらえますか?

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

4

2 に答える 2

49

あなたの質問に対する答え

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

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

そして効果のために：それはこのように跳ねますトランジション効果になります

CSS キュービックベジエについて

次の 4 つのパラメーターを使用します。

cubic-bezier(P1x,P1y,P2x,P2y)

ポイント cubucB

これらは何をしますか？

これらはポイントにマップされ、これらのポイントはベジエ曲線の一部です。

  • つまり、4 つのポイントがありますが、関数は、対応する X 値と Y 値を持つ P1 と P2 のみを言及していますか?

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

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

便利なリンク

于 2014-08-26T09:03:25.153 に答える