<easing-function>

構文

/* キーワードによる線形イージング関数 */
linear                /* linear(0, 1) */

/* カスタム線形イージング関数 */
linear(0, 0.25, 1)
linear(0, 0.25 75%, 1)

/* キーワード 3 次ベジェイージング関数 */
ease                  /* cubic-bezier(0.25, 0.1, 0.25, 1) */
ease-in               /* cubic-bezier(0.42, 0, 1, 1) */
ease-out              /* cubic-bezier(0, 0, 0.58, 1) */
ease-in-out           /* cubic-bezier(0.42, 0, 0.58, 1) */

/* カスタム 3 次ベジェイージング関数 */
cubic-bezier(0.25, 0.1, 0.25, 1)

/* キーワード段階イージング関数 */
step-start            /* steps(1, jump-start) */
step-end              /* steps(1, jump-end) */

/* カスタム段階イージング関数 */
steps(4, end)
steps(10, jump-both)

値

<easing-function> は以下の型のうちのいずれかです。

<linear-easing-function>

一定の速度で進行する遷移を作成します。この関数は、次のいずれかを使用して指定することができます。

linear

一定の補間率で、期間を通して進行率に変化のないものを指定します（つまり、加速や減速はありません）。 このキーワード値は linear(0, 1) と同等です。 これは cubic-bezier(0, 0, 1, 1) と表すこともできます。

メモ: linear キーワードは常に linear(0, 1) として解釈されます。ここで関数 linear(0, 1) は linear(0 0%, 1 100%) と解釈されます。

linear()

複数の進行の点を <number> 値で定義し、オプションの <percentage> 値でそのタイミングを制御します。

<cubic-bezier-easing-function>

変化を可変の割合で行うスムーズな遷移を作成します。この関数は次のいずれかで指定することができます。

ease

イージング関数 cubic-bezier(0.25, 0.1, 0.25, 1) を表します。 これは補間がゆっくり始まり、急激に加速し、終わりに向かって徐々に遅くなることを示します。 これは ease-in-out と似ていますが、始めのうちはより急激に加速されます。

ease-in

イージング関数 cubic-bezier(0.42, 0, 1, 1) を表します。 これは補間がゆっくり始まり、その後次第に加速していき、最終状態に達するとアニメーションは突然停止します。

ease-out

イージング関数 cubic-bezier(0, 0, 0.58, 1) を表します。 補間が急速に始まり、最終状態にかけて次第に減速していくことを示します。

ease-in-out

イージング関数 cubic-bezier(0.42, 0.0, 0.58, 1.0) を表します。 これは補間がゆっくり始まり、加速し、終わりに向かって減速することを示します。 始めは ease-in キーワードのように動作し、終わりは ease-out キーワードのように動作します。

cubic-bezier()

2 つの制御点を指定する 4 つの <number> を用いて、カスタム曲線を定義します。 X 座標は [0, 1] の範囲でなければなりません。

<step-easing-function>

アニメーションを等間隔の数値に分割し、段階的な遷移を作成します。これにより、アニメーションは滑らかに遷移するのではなく、段階から次の段階へとジャンプするようになります。 この関数は、次のいずれかを指定することで使用できます。

step-start

イージング関数 steps(1, jump-start) または steps(1, start) を表します。 補間はすぐに最終状態に遷移し、最後までその状態を維持することを示します。

step-end

イージング関数 steps(1, jump-end) または steps(1, end) を表します。 補間は、終了するまで初期状態のままで、終了時点で直接最終状態にジャンプします。

steps()

間隔の数を指定する <integer> と、ジャンプのタイミングを制御するオプションのキーワードを使用して、階段状の曲線を作成します。

形式文法

<easing-function> = 
  <linear-easing-function>        |
  <cubic-bezier-easing-function>  |
  <step-easing-function>          

<linear-easing-function> = 
  linear      |
  <linear()>  

<cubic-bezier-easing-function> = 
  ease              |
  ease-in           |
  ease-out          |
  ease-in-out       |
  <cubic-bezier()>  

<step-easing-function> = 
  step-start  |
  step-end    |
  <steps()>   

<linear()> = 
  linear( [ <number> && <percentage>{0,2} ]# )  

<cubic-bezier()> = 
  cubic-bezier( [ <number [0,1]> , <number> ]#{2} )  

<steps()> = 
  steps( <integer> , <step-position>? )  

<integer> = 
  <number-token>  

<step-position> = 
  jump-start  |
  jump-end    |
  jump-none   |
  jump-both   |
  start       |
  end         

例

イージング関数の比較

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

HTML

<div>
  <div></div>
</div>
<ul>
  <li>
    <button class="animation-button">アニメーションを開始</button>
  </li>
  <li>
    <label for="easing-select">イージング関数を選択:</label>
    <select id="easing-select">
      <option selected>linear</option>
      <option>linear(0, 0.5 50%, 1)</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,
    rgb(25 255 255 / 80%),
    rgb(25 255 255 / 40%)
  );
  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 === "アニメーションを開始") {
    divElem.style.animationName = "move-right";
    startBtn.textContent = "アニメーションを停止";
    divElem.style.animationTimingFunction = selectElem.value;
  } else {
    divElem.style.animationName = "unset";
    startBtn.textContent = "アニメーションを開始";
  }
});

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

結果

仕様書

ブラウザーの互換性

関連情報

• CSS イージング関数モジュール
• CSS アニメーション
• CSS トランジション
• linear() easing generator - Jake Archibald
• cubic-bezier.com - Lea Verou (2011)