CSS イーズインアウトの背後にある実際の数字
2 つの制御点をドラッグしてカスタム CSS cubic-bezier() タイミング関数を設計し、線形参照に対してライブでプレビューし、準備ができた値をコピーします。
処理中...
0%
結果
このページでは、x1=0.42、y1=0、x2=0.58、y2=1 が既にロードされている 3 次ベジェ ジェネレーターが開きます。CSS のイーズインアウト キーワードが展開される正確な制御ポイントです。いずれかのハンドルをドラッグするか、数値を直接編集すると、カーブ、アニメーション プレビュー、およびコピー可能な文字列がすべてすぐに更新されます。
easy-in-out は 5 つの組み込み CSS タイミング キーワードの 1 つであり、この曲線が最初から緩やかに加速し、中間まではほぼ均等なペースを維持し、最後まで緩やかに元に戻るという、ほとんどの UI モーションにとって自然な形状であるため、人気があります。これをキーワード名ではなく明示的な制御ポイントとして見ると、その理由が明らかです。y1 は 0 の近くに位置し、y2 は 1 の近くに位置し、どちらも対応する x に近いため、どちらの方向にもオーバーシュートはありません。
雰囲気を少し変える必要があるときは、キーワードそのものではなく、これら 4 つの数字を開始点として使用します。x1 を下に引き下げてよりキビキビとしたスタートにするか、y2 を 1 より上に押して、これと同じ形状を穏やかなオーバーシュートに変えます。すべての変更により、プレビューとコピー可能な cubic-bezier() 行が即座に更新されます。