path: root/files/ja/web/css/animation-timing-function/index.html

---
title: animation-timing-function
slug: Web/CSS/animation-timing-function
tags:
  - Animation
  - CSS
  - CSS アニメーション
  - CSS プロパティ
  - Reference
  - animation-timing-function
translation_of: Web/CSS/animation-timing-function
---
<div>{{CSSRef}}</div>

<p><strong><code>animation-timing-function</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、アニメーションがそれぞれの周期の中でどのように進行するかを設定します。</p>

<div>{{EmbedInteractiveExample("pages/css/animation-timing-function.html")}}</div>

<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>

<p>アニメーションのプロパティすべてを一度に設定するには、一括指定プロパティである {{cssxref("animation")}} プロパティを使用すると便利です。</p>

<h2 id="Syntax" name="Syntax">構文</h2>

<pre class="brush: css no-line-numbers">/* キーワード値 */
animation-timing-function: ease;
animation-timing-function: ease-in;
animation-timing-function: ease-out;
animation-timing-function: ease-in-out;
animation-timing-function: linear;
animation-timing-function: step-start;
animation-timing-function: step-end;

/* 関数値 */
animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
animation-timing-function: steps(4, end);

/* 段階関数のキーワード */
animation-timing-function: steps(4, jump-start);
animation-timing-function: steps(10, jump-end);
animation-timing-function: steps(20, jump-none);
animation-timing-function: steps(5, jump-both);
animation-timing-function: steps(6, start);
animation-timing-function: steps(8, end);

/* 複数のアニメーション */
animation-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1);

/* グローバル値 */
animation-timing-function: inherit;
animation-timing-function: initial;
animation-timing-function: unset;
</pre>

<p>タイミング関数は <a href="/ja/docs/Web/CSS/@keyframes">@keyframes</a> 規則内にあるそれぞれのキーフレームに指定されることがあります。キーフレームに <code><strong>animation-timing-function</strong></code> が指定されていない場合、そのキーフレームにはアニメーションが適用された要素から <code><strong>animation-timing-function</strong></code> の適切な値が使用されます。</p>

<p>キーフレームのタイミング関数は、指定されたキーフレームからそのプロパティを指定する次のキーフレームまで、またはそのプロパティを指定する後続のキーフレームがない場合はアニメーションの終わりまで、プロパティごとに適用されます。結果的に、 <code><strong>animation-timing-function</strong></code> のうち <code><strong>100%</strong></code> または <code><strong>to</strong></code> に指定したものは使用されません。</p>

<h3 id="Values" name="Values">値</h3>

<dl>
 <dt>{{cssxref("&lt;timing-function&gt;")}}</dt>
 <dd>
 <p>{{cssxref("animation-name")}} で定められた、アニメーションに対応するタイミング関数です。</p>

 <p>ステップではないキーワード値 (easy, linear, ease-in-out など) は、それぞれ固定の 4 点値を持つ 3 次ベジェ曲線を表し、 cubic-bezier() 関数の値で非定義値を指定することができます。ステップタイミング関数は、入力時間を長さが等しい指定された数の間隔に分割します。これは、ステップ数とステップ位置によって定義されます。</p>
 </dd>
 <dt><code>ease</code></dt>
 <dd><code>cubic-bezier(0.25, 0.1, 0.25, 1.0)</code> と同じで、既定値であり、アニメーションの中央に向けて変化量が増加し、最後に向けて減少します。</dd>
 <dt><code>linear</code></dt>
 <dd><code>cubic-bezier(0.0, 0.0, 1.0, 1.0)</code> と同じで、等しい速度でアニメーションします。</dd>
 <dt><code>ease-in</code></dt>
 <dd><code>cubic-bezier(0.42, 0, 1.0, 1.0)</code> と同じで、プロパティのアニメーションの変化の速度はゆっくり始まり、終了まで加速します。</dd>
 <dt><code>ease-out</code></dt>
 <dd><code>cubic-bezier(0, 0, 0.58, 1.0)</code> と同じで、アニメーションは速く始まり、速度を落としながら続きます。</dd>
 <dt><code>ease-in-out</code></dt>
 <dd><code>cubic-bezier(0.42, 0, 0.58, 1.0)</code> と同じで、プロパティのアニメーションはゆっくり変化し、速度を上げ、また速度を落とします。</dd>
 <dt><code>cubic-bezier(p1, p2, p3, p4)</code></dt>
 <dd>ユーザー定義の二次元ベジェ曲線で、 p1 と p3 の値は 0 から 1 の間である必要があります。</dd>
 <dt><code>steps(n, &lt;jumpterm&gt;)</code></dt>
 <dd>遷移に沿った <em>n</em> 個の停止点に沿ってアニメーションを表示し、それぞれの停止点を同じ時間の長さで表示します。例えば、 <em>n</em> が 5 の場合、5つの段階があります。アニメーションが停止する点は、以下の jumpterm によって、アメーションに沿って 0%, 20%, 40%, 60%, 80% となるか、 20%, 40%, 60%, 80%, 100% となるか、アニメーションの 0% と 100% の間で5つの停止点を設定するか、 0% と 100% を含む5つの停止点を設定するか (すなわち 0%, 25%, 50%, 75%, 100%)、の何れかを使用します。
 <dl>
  <dt><code>jump-start</code></dt>
  <dd>アニメーションの開始時に最初のジャンプが発生するように、左連続関数を表します。</dd>
  <dt><code>jump-end</code></dt>
  <dd>アニメーションの終了時に最後のジャンプが発生するように、右連続関数を表します。</dd>
  <dt><code>jump-none</code></dt>
  <dd>どちらにもジャンプはありません。代わりに、 0% 位置と 100% 位置の両方で、それぞれ 1/n の間隔を保持します。</dd>
  <dt><code>jump-both</code></dt>
  <dd>0% 位置と 100% 位置の両方で一時停止を含み、アニメーションの反復中に効果的にステップを追加します。</dd>
  <dt><code>start</code></dt>
  <dd><code>jump-start</code> と同じです。</dd>
  <dt><code>end</code></dt>
  <dd><code>jump-end</code> と同じです。</dd>
 </dl>
 </dd>
 <dt><code>step-start</code></dt>
 <dd><code>steps(1, jump-start)</code> と同じです。</dd>
 <dt><code>step-end</code></dt>
 <dd><code>steps(1, jump-end)</code> と同じです。</dd>
</dl>

<div class="note">
<p><strong>メモ</strong>: <code>animation-*</code> プロパティにカンマ区切りで複数の値を指定した場合、 {{cssxref("animation-name")}} プロパティで指定したアニメーションに割り当てられますが、いくつあるかによって異なる方法で割り当てられます。詳しくは、<a href="/ja/docs/Web/CSS/CSS_Animations/Using_CSS_animations#Setting_multiple_animation_property_values">複数のアニメーションプロパティ値の設定</a>を参照してください。</p>
</div>

<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>

{{csssyntax}}

<h2 id="Examples" name="Examples">例</h2>

<div>
<h3 id="Cubic-Bezier_examples" name="Cubic-Bezier_examples">二次元ベジェの例</h3>

<div class="hidden">
<pre class="brush:html">&lt;div class="parent"&gt;
  &lt;div class="ease"&gt;ease&lt;/div&gt;
  &lt;div class="easein"&gt;ease-in&lt;/div&gt;
  &lt;div class="easeout"&gt;ease-out&lt;/div&gt;
  &lt;div class="easeinout"&gt;ease-in-out&lt;/div&gt;
  &lt;div class="linear"&gt;linear&lt;/div&gt;
  &lt;div class="cb"&gt;cubic-bezier(0.2,-2,0.8,2)&lt;/div&gt;
&lt;/div&gt;</pre>

<pre class="brush:css;">.parent &gt; div[class] {
    animation-name: changeme;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    margin-bottom: 4px;
}
@keyframes changeme {
   0% {
      min-width: 12em;
      width: 12em;
      background-color: black;
      border: 1px solid red;
      color: white;
   }
   100% {
      width: 90vw;
      min-width: 24em;
      background-color: magenta;
      color: yellow;
      border: 1px solid orange;
   }
}
</pre>
</div>

<pre class="brush: css">.ease {
   animation-timing-function: ease;
}
.easein {
   animation-timing-function: ease-in;
}
.easeout {
   animation-timing-function: ease-out;
}
.easeinout {
   animation-timing-function: ease-in-out;
}
.linear {
   animation-timing-function: linear;
}
.cb {
   animation-timing-function: cubic-bezier(0.2,-2,0.8,2);
}</pre>

<div>{{EmbedLiveSample("Cubic-Bezier_examples", 600, 200)}}</div>
</div>

<div>
<h3 id="Step_examples" name="Step_examples">段階の例</h3>

<div class="hidden">
<pre class="brush:html">&lt;div class="parent"&gt;
  &lt;div class="jump-start"&gt;jump-start&lt;/div&gt;
  &lt;div class="jump-end"&gt;jump-end&lt;/div&gt;
  &lt;div class="jump-both"&gt;jump-both&lt;/div&gt;
  &lt;div class="jump-none"&gt;jump-none&lt;/div&gt;
  &lt;div class="start"&gt;start&lt;/div&gt;
  &lt;div class="end"&gt;end&lt;/div&gt;
  &lt;div class="step-start"&gt;step-start&lt;/div&gt;
  &lt;div class="step-end"&gt;step-end&lt;/div&gt;
&lt;/div&gt;</pre>

<pre class="brush:css;">.parent &gt; div[class] {
    animation-name: changeme;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    margin-bottom: 4px;
}
@keyframes changeme {
   0% {
      min-width: 12em;
      width: 12em;
      background-color: black;
      border: 1px solid red;
      color: white;
   }
   100% {
      width: 90vw;
      min-width: 24em;
      background-color: magenta;
      color: yellow;
      border: 1px solid orange;
   }
}
</pre>
</div>

<pre class="brush: css">.jump-start {
   animation-timing-function: steps(5, jump-start);
}
.jump-end {
   animation-timing-function: steps(5, jump-end);
}
.jump-none {
   animation-timing-function: steps(5, jump-none);
}
.jump-both {
   animation-timing-function: steps(5, jump-both);
}
.start {
   animation-timing-function: steps(5, start);
}
.end {
   animation-timing-function: steps(5, end);
}
.step-start {
   animation-timing-function: step-start;
}
.step-end {
   animation-timing-function: step-end;
}</pre>

<div>{{EmbedLiveSample("Step_examples", 600, 200)}}</div>
</div>

<h2 id="Specifications" name="Specifications">仕様書</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">仕様書</th>
   <th scope="col">状態</th>
   <th scope="col">備考</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS3 Animations', '#animation-timing-function', 'animation-timing-function')}}</td>
   <td>{{Spec2('CSS3 Animations')}}</td>
   <td>初回定義</td>
  </tr>
 </tbody>
</table>

<p>{{cssinfo}}</p>

<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>

<p>{{Compat("css.properties.animation-timing-function")}}</p>

<h2 id="See_also" name="See_also">関連情報</h2>

<ul>
 <li><a href="/ja/docs/Web/CSS/CSS_Animations/Using_CSS_animations" title="CSS アニメーションに関する CSS 開発者ガイド">CSS アニメーションの使用</a></li>
 <li>{{cssxref('timing-function')}}</li>
 <li>JavaScript {{domxref("AnimationEvent")}} API</li>
 <li><a href="http://cubic-bezier.com">cubic-bezier.com</a></li>
</ul>