<easing-function>

イージング関数には、線形関数、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(x1, y1, x2, y2)

ここで、

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;
});

結果

これらは 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)

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 アニメーション
• CSS トランジション
• cubic-bezier