CSS で linear() イージング関数を使用して複雑なアニメーション曲線を作成する

CSS のイージング関数 linear() を使用すると、ポイント間を線形に補間して、バウンス効果やスプリング効果を再現できます。

Bramus

CSS のイージング

CSS で要素をアニメーション化または遷移させる場合、animation-timing-function プロパティと transition-timing-function プロパティを使用して、イージング関数で値の変化率を制御します。

CSS には、linear、ease、ease-in、ease-out、ease-in-out というプリセットとして使用できるキーワードがいくつかあります。独自のイージング曲線を作成するには、cubic-bezier() 関数を使用するか、steps() イージング関数を使用してステップベースのアプローチを取ります。

イージングを適切に使用すると、アニメーション化された要素に、勢いを増すような重み付けが与えられます。

CSS では、バウンス効果やスプリング効果などの複雑な曲線を作成することはできませんが、linear() を使用すると、驚くほど正確に近似できます。

linear() の概要

CSS でイージングを定義する新しい方法は、linear() を使用することです。この関数は、カンマで区切られた複数のストップを受け取ります。各ストップは、0 ～ 1 の範囲の単一の数値です。各ストップの間では、線形に補間が行われます。これが関数の名前の由来です。

animation-timing-function: linear(0, 0.25, 1);

これらのストップはデフォルトで等間隔に配置されます。上記のスニペットでは、0.25 の出力値が 50% の位置で使用されます。

視覚化すると、linear(0, 0.25, 1) のグラフは次のようになります。

ストップを等間隔に配置したくない場合は、ストップ長を指定することもできます。 ストップ長として 1 つの値を渡すと、その出発地が定義されます。

animation-timing-function: linear(0, 0.25 75%, 1);

この場合、出力値 0.25 は 50% の位置ではなく、75% の位置で使用されます。

ストップ長として 2 つの値を指定すると、開始点と終了点の両方が定義されます。

animation-timing-function: linear(0, 0.25 25% 75%, 1);

出力値 0.25 は、時間の 25% から 75% の間で使用されます。

複雑な曲線を作成する

上記の例はシンプルなイージングですが、精度を多少犠牲にすれば、linear() を使用して複雑なイージング関数を再現できます。

JavaScript を使用して定義された、CSS で直接表現できないイージングの一種であるバウンス イージング曲線を見てみましょう。

function easing(pos) {
  const t = 7.5625;
  const e = 2.75;
  return pos < 1 / e
    ? t * pos * pos
    : pos < 2 / e
    ? t * (pos -= 1.5 / e) * pos + 0.75
    : pos < 2.5 / e
    ? t * (pos -= 2.25 / e) * pos + 0.9375
    : t * (pos -= 2.625 / e) * pos + 0.984375;
}

コードだけではわかりにくいかもしれませんが、視覚化するとわかりやすくなります。青い曲線として視覚化された出力は次のようになります。

曲線にストップを追加することで、曲線を簡略化できます。緑色の点はそれぞれストップを示しています。

linear() に渡すと、結果は元の曲線に似た曲線になりますが、エッジが少し粗くなります。

緑色のアニメーション ボックスと青色のアニメーション ボックスを比較すると、緑色のボックスは滑らかではありません。

ただし、十分なストップを追加すると、元の曲線をかなり正確に近似できます。更新されたバージョンを次に示します。

ストップの数を 2 倍にするだけで、滑らかな結果が得られます。

アニメーションに使用されるコードは次のようになります。

animation-timing-function: linear(
  /* Start to 1st bounce */
  0, 0.004, 0.016, 0.035, 0.063 9.1%, 0.141, 0.25, 0.391, 0.563, 0.765, 1,
  /* 1st to 2nd bounce */
  0.891, 0.813 45.5%, 0.785, 0.766, 0.754, 0.75, 0.754, 0.766, 0.785, 0.813 63.6%, 0.891, 1 72.7%,
  /* 2nd to 3rd bounce */
  0.973, 0.953, 0.941, 0.938, 0.941, 0.953, 0.973, 1,
  /* 3rd bounce to end */
  0.988, 0.984, 0.988, 1
);

役立つツール

このストップのリストを手動で作成するのは非常に面倒です。幸いなことに、Jake と Adam は、イージング曲線を linear() に変換する ツールを作成しました。

このツールは、JavaScript イージング関数または SVG 曲線を入力として受け取り、linear() を使用して簡略化された曲線を出力します。スライダーを使用して、必要なストップの数とその精度を制御します。

右上のプリセットから選択することもできます。スプリング、バウンス、シンプルな伸縮性、マテリアル デザインの強調イージングが含まれています。

DevTools のサポート

DevTools では、linear() の結果を視覚化して編集できます。アイコンをクリックすると、ストップをドラッグできるインタラクティブなツールチップが表示されます。

この DevTools 機能は、Chrome 114 以降の DevTools で使用できます。