いくつかのスライドとメニューを含む div があります。
#wrap {
position: relative;
top: 0;
transition: top 1.4s cubic-bezier(.49,.22,.52,1.35);
}<div id="wrap"></div>ここで transition プロパティが何をするのか説明してくれる人はいますか?
div にどのような効果をもたらすのか理解できません。
ベストアンサー1
あなたの質問に対する回答
そのプロパティは のアニメーション用です<div id="wrap"></div>。
つまり、top プロパティを使用してアニメーション化されるということです。
そして効果としては、これは移行効果となる
CSS キュービックベジェを理解する
4 つのパラメータが必要です:
cubic-bezier(P1x,P1y,P2x,P2y)
これらは何をするのですか?
これらは点にマッピングされ、これらの点はベジェ曲線の一部になります。
つまり、4 つのポイントがあるのに、関数では P1 と P2 と、それに対応する X 値と Y 値のみが示されるということですか?
CSS ベジェ曲線では、P0 と P3 は常に同じ位置にあります。P0 は (0,0)、P3 は (1,1) にあります。重要な点は、cubic-bezier 関数で渡されるポイントは 0 から 1 の間だけであるということです。したがって、 のようなものを試そうとすると
cubic-bezier(2,3,5,2)、すべてのイージング関数の中で最悪の線形イージングに追いやられることになります。これは、フォント ファミリが Comic Sans にフォールバックするようなものです。また、x 軸はアニメーションにかかる時間、y 軸は変更されるプロパティであることにも注意してください。上のグラフに基づいて、最初は急速に緩やかになり、途中で遅くなり、最後にスピードが上がる様子を視覚化できます。