材料設計標準イージング カーブ
2 つの制御点をドラッグしてカスタム CSS cubic-bezier() タイミング関数を設計し、線形参照に対してライブでプレビューし、準備ができた値をコピーします。
処理中...
0%
結果
このページでは、x1=0.4、y1=0、x2=0.2、y2=1 がすでに読み込まれた状態でジェネレーターが開きます。これは、Google のマテリアル デザイン モーション ガイドラインで公開されている標準イージング カーブです。ハンドルをドラッグするか、数値を編集し、カーブ、ライブ プレビュー、およびコピー可能な CSS を一緒に更新します。
マテリアル デザインでは、このカーブを「標準イージング」と呼び、ほとんどの画面上のトランジション (すでに表示されており、同じ画面内で単に移動、サイズ変更、フェードする要素) にこのカーブを推奨しています。その形状は急速に加速し、その後緩やかに減速して所定の位置に収まります。これが、非常に多くの Android アプリとマテリアル スタイルの Web UI が、同じ 4 つの数字を使用していることに誰も気づかずに同じ遷移の感触を共有している理由です。
マテリアルの一貫性を実現するために、transition-timing-function または anime-timing-function に直接ドロップするか、参照ポイントとして使用します。マテリアルのガイドラインでは、画面に出入りする要素に対して個別の「減速」曲線と「加速」曲線も定義していますが、この単一の標準曲線が置き換えられるものではありません。