<easing-function> - CSS: カスケーディングスタイルシート

<easing-function> は CSS のデータ型で、アニメーションの間に一次元の値がどれだけの速さで変化するかを記述する数学的な関数を表します。これにより、アニメーションの速度を期間中に変化させることができます。

イージング関数のうち3次ベジェ曲線のサブセットに含まれるものは、アニメーションの開始と終了を滑らかにすることができるため、よく「スムーズ」イージング関数と呼ばれています。これらの関数は、時間比と出力比を相関させており、どちらも <number> で表されます。これらの値は 0.0 が初期状態、1.0 が最終状態を表します。

特定の関数が使用された場合によっては、計算された出力値がアニメーションの経路の間で、時には 1.0 を超えたり、 0.0 を下回ったりすることがあります。これによってアニメーションが最終状態の後に行ったり、戻ったりすることになります。 left や right のような一部のプロパティは、これによって一種の「バウンド」効果を生成します。

しかし、色の成分の値が 255 を超えたり 0 を下回ったりするように、出力値が取り得る範囲を超えてしまう場合は、その値は取り得る値の中で最も近い値に切り詰められます (色の成分の値であれば、それぞれ 255 および 0 になります)。一部の cubic-bezier() 曲線にはこのような特性があります。

構文

イージング関数には、線形関数、3次ベジェ曲線、階段関数の3種類があります。 <easing-function> 型の値は、これら3つの型のうちの1つを使ってイージング関数を記述します。

イージング関数

CSS は 3 種類のタイミング関数に対応しています。線形関数と、3次ベジェ曲線のサブセットの関数と、階段関数です。これらの関数でもっとも有用なものは、簡単に指定できるようにキーワードが与えられています。

線形クラスのイージング関数

linear

The animation moves from beginning to end at a constant rate. This keyword represents the easing function cubic-bezier(0.0, 0.0, 1.0, 1.0).

cubic-bezier() クラスのイージング関数

cubic-bezier() 関数記法は、3次ベジェ曲線を定義します。この曲線は連続的であり、アニメーションの始まりや終わりを緩やかにするためによく使用されます。このため、イージング関数と呼ばれることもあります。

3次ベジェ曲線は 4 個の点 P₀, P₁, P₂, P₃ によって定義されます。P₀ と P₃ は曲線の始点と終点であり、 CSS では座標が割合 (横座標は時間の割合、縦座標は出力範囲の割合) であることから、これらの点は固定されています。P₀ は (0, 0) で開始時間および初期状態を示し、P₃ は (1, 1) で終了時間および最終状態を示します。

すべての3次ベジェ曲線が数学的な関数とは限らないため、どの3次ベジェ曲線もイージング関数として適しているわけではありません。すなわち、曲線は横座標で 0 から 1 の値をとります。 P₀ および P₃ は CSS の定義で固定されているので、P₁ および P₂ の横座標の値が [0, 1] の範囲にある場合のみ、3次ベジェ曲線は関数であり、それゆえ有効になります。

P₁ または P₂ の縦座標の値が [0, 1] の範囲から外れている3次ベジェ曲線では、はずむ効果が得られます。

不正な cubic-bezier 曲線を指定すると、 CSS はその属性全体を無視します。

構文

cubic-bezier(x₁, y₁, x₂, y₂)

ここで、

x₁, y₁, x₂, y₂: 3次ベジェ曲線を定義する P₁ および P₂ 点の横座標および縦座標の値を示す <number> です。x₁ および x₂ は [0, 1] の範囲にある必要があり、さもないと不正な値になります。

一般的なタイミング関数のキーワード

ease

アニメーション開始時はより急速に加速して、終了に向けて少しずつ緩やかになっていきます。このキーワードは、イージング関数 cubic-bezier(0.25, 0.1, 0.25, 1.0) を表します。この関数は ease-in-out に似ていますが、開始がより急速です。

ease-in

アニメーションの始めは緩やかで、その後次第に加速していき、最終状態に達するとアニメーションは突然停止します。このキーワードはイージング関数 cubic-bezier(0.42, 0.0, 1.0, 1.0) を表します。

`ease-in-out`

アニメーションは緩やかに始まり、加速し、終了に向けて加速が緩やかになります。このキーワードはイージング関数 cubic-bezier(0.42, 0.0, 0.58, 1.0) を表します。開始時は ease-in 関数に、完了時は ease-out 関数に似ています。

ease-out

アニメーションは急速に始まり、最終状態にかけて次第に緩やかになっていきます。このキーワードはタイミング関数 cubic-bezier(0.0, 0.0, 0.58, 1.0) を表します。

steps() クラスのタイミング関数

steps() 関数記法は、出力値の範囲を等間隔に区切るステップ関数を定義します。このステップ関数のサブクラスは、階段関数と呼ばれることもあります。

構文

steps(number_of_steps, direction)

ここで、

number_of_steps

厳密に正の <integer> で、ステップ関数を構成する等間隔の段数を示すものです。

direction

関数が左連続か右連続かを表すキーワードです。

jump-start は左連続関数を表し、したがってアニメーションの開始時に最初のステップが発生します。
jump-end は右連続関数を表し、したがってアニメーションの完了時に最後のステップが発生します。
jump-both は右および左の連続関数を表し、0%と100%の位置の両方で停止し、アニメーションの繰り返しの間に効果的にステップを入れます。
jump-none どちらの端にもジャンプしません。代わりに、それぞれ区間の 1/n ごとに0%の位置と100%の位置の両方を保持します。
start は jump-start と同等です。
end は jump-end と同等です。

end が既定値です。

steps( n, <direction> )

steps(2, jump-start)
steps(2, start)
steps(4, jump-end) steps(4, end)
steps(5, jump-none)
steps(3, jump-both)

step-start

アニメーションはすぐに最終状態に遷移し、最後までその状態を維持します。このキーワードは、イージング関数 steps(1, jump-start) または steps(1, start) を表します。

step-end

アニメーションは、終了するまで初期状態のままで、終了時点で直接最終状態にジャンプします。このキーワードは、イージング関数 steps(1, jump-end) または steps(1, end) を表します。

例

イージング関数の比較

この例では、提供されているボタンを使ってアニメーションを開始したり停止したりすることができ、メニューを選択してイージング関数を、利用可能なキーワードに加えていくつかの cubic-bezier() および steps() のオプションの中から選択することができるようになっています。これは、様々なイージング関数を簡単に比較できるようにするためのアイデアです。

HTML

<div>
  <div></div>
</div>
<ul>
  <li>
    <button class="animation-button">Start animation</button>
  </li>
  <li>
    <label for="easing-select">Choose an easing function:</label>
    <select id="easing-select">
      <option selected>linear</option>
      <option>ease</option>
      <option>ease-in</option>
      <option>ease-in-out</option>
      <option>ease-out</option>
      <option>cubic-bezier(0.1, -0.6, 0.2, 0)</option>
      <option>cubic-bezier(0, 1.1, 0.8, 4)</option>
      <option>steps(5, end)</option>
      <option>steps(3, start)</option>
      <option>steps(4)</option>
    </select>
  </li>
</ul>

CSS

body > div {
  position: relative;
  height: 100px;
}

div > div {
  position: absolute;
  width: 50px;
  height: 50px;
  background-color: blue;
  background-image: radial-gradient(circle at 10px 10px, rgba(25,255,255,0.8),rgba(25,255,255,0.4));
  border-radius: 50%;
  top: 25px;
  animation: 1.5s infinite alternate;
}

@keyframes move-right {
  from {
    left: 10%;
  }

  to {
    left: 90%;
  }
}

li {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

JavaScript

const selectElem = document.querySelector('select');
const startBtn = document.querySelector('button');
const divElem = document.querySelector('div > div');

startBtn.addEventListener('click', () => {
  if(startBtn.textContent === 'Start animation') {
    divElem.style.animationName = 'move-right';
    startBtn.textContent = 'Stop animation';
    divElem.style.animationTimingFunction = selectElem.value;
  } else {
    divElem.style.animationName = 'unset';
    startBtn.textContent = 'Start animation';
  }
});

selectElem.addEventListener('change', () => {
  divElem.style.animationTimingFunction = selectElem.value;
});

結果

cubic-bezier() 関数の例

これらは CSS における正しい3次ベジェ曲線の使い方です。

/* 4 つの値が [0, 1] の範囲に含まれる、標準的なベジェ曲線 */
cubic-bezier(0.1, 0.7, 1.0, 0.1)

/* <整数値> は <数量> でもあるので、<整数値> を用いても有効です。 */
cubic-bezier(0, 0, 1, 1)

/* 横軸で負数を用いるのは有効であり、はずむ効果をもたらします。 */
cubic-bezier(0.1, -0.6, 0.2, 0)

/* 横軸において 1.0 を超える値も有効です。 */
cubic-bezier(0, 1.1, 0.8, 4)

これらの3次ベジェ曲線の定義は無効です。

/* アニメーションさせるものは色ですが、
   ベジェ曲線に用いるのは割合の数値です。 */
cubic-bezier(0.1, red, 1.0, green)

/* 定義域は [0, 1] の範囲であったり、曲線が時間の
関数でなかったりする場合です。 */
cubic-bezier(2.45, 0.6, 4, 0.1)

/* 2 つの点を定義する必要があり、それらに既定値はありません。 */
cubic-bezier(0.3, 2.1)

/* 縦座標は [0, 1] の範囲にある必要があり、
   さもないと曲線はタイミング関数になりません。 */
cubic-bezier(-1.9, 0.3, -0.2, 2.1)

steps() 関数の例

p>以下のタイミング関数は妥当です。

/* 5段階あり、最後の段階は
   アニメーションの完了直前に発生します。 */
steps(5, end)

/* 2段階の階段で、最初の段階は
   アニメーションの開始時に発生します。 */
steps(2, start)

/* 第二の引数は省略可能です。 */
steps(2)

以下のタイミング関数は不正です。

/* 最初の引数は <integer> でなければならず、
   整数と同じ値であっても実数であってはいけません。 */
steps(2.0, jump-end)

/* 段数は負の値であってはいけません。 */
steps(-3, start)

/* 段数は少なくとも 1 つ必要です。 */
steps(0, jump-none)

仕様書

仕様書	状態	備考
CSS Animations Level 1 <timing-function> の定義	草案	`<single-timing-function>` を CSS トランジションモジュールの `<single-transition-timing-function>` の別名として定義
Unknown <easing-function> の定義	不明	初回定義

ブラウザーの互換性

BCD tables only load in the browser