アニメーションタイミング関数プロパティ

最終更新：2026-09-13

animation-timing-function アニメーションタイミング関数プロパティ

animation-timing-function プロパティは、アニメーションの速度が時間とともにどう変化するかを定義します — 一定の割合で進むか、初めが速くて遅くなるか、あるいは弾むような感じになるか。中間フレームの時間分布を制御することで、動きをより物理的に、あるいはより樣式化して感じさせ、洗練されたアニメーション品質の鍵となるプロパティです。

カテゴリ
初期値	ease
継承	いいえ
適用対象
アニメーションタイプ
CSS バージョン	CSS3
状態	標準

📝 構文

animation-timing-function: ease | ease-in | ease-out | ease-in-out | linear | step-start | step-end | steps(<integer>) | cubic-bezier(<number>,<number>,<number>,<number>);

⚙️ 値

値	タイプ	説明
`ease \| ease-in \| ease-out \| ease-in-out \| linear \| step-start \| step-end \| steps() \| cubic-bezier()`	キーワード	アニメーションの速度曲線

▶ 例

以下のコードを編集して、プレイグラウンドでライブ結果を確認してください：

▶ 試す

🌐 ブラウザーサポート

ブラウザー	Chrome	Edge	Firefox	Safari	Opera
animation-timing-function	✓ v43	✓ v12	✓ v16	✓ v9	✓ v30
すべての主要ブラウザーでサポート

ヒント： cubic-bezier() で任意のカスタムベジェ曲線を定義できます。cubic-bezier.com のようなツールで対話的に可視化できます。steps() はスプライトシートなどのフレーム単位アニメーションに使われます。

ヒント： ease はデフォルトで、「遅い-速い-遅い」の挙動をします。linear は一定速度で連続回転に向き、ease-out は要素が画面に入る際によく使われ、ease-in は要素が去る際に使われます。

❓ よくある質問

Qtransition-timing-function と animation-timing-function は同じですか？

A受け入れられる値は同じです — ease、linear、cubic-bezier()、steps() などですが、作用する対象が異なります。前者はトランジションに、後者はアニメーションに適用されます。どちらも距離と速度ではなく時間と進捗の関係を制御するため、同じ cubic-bezier 値は両方の場所で同じ効果を生みます。

Qcubic-bezier で弾むような弾性効果を作るにはどうすればよいですか？

Acubic-bezier() で y 値が 0〜1 の範囲外に出るようにします。例えば cubic-bezier(0.68, -0.55, 0.27, 1.55) です。曲線が範囲を超えると、要素はまず目標値を越えて動き、その後ばねのように戻り、弾性感を生みます。このようなオーバーシュートする曲線は、弾むボタンやポップアップの登場などの活発なインタラクションに向いています。

Qsteps() のフレーム単位アニメーションはどう書き、いつ使うべきですか？

Asteps(n) はアニメーションを n 等分のセグメントに分け、連続的に補間するのではなくセグメント間で飛びます。スプライトシートと組み合わせるとフレーム単位アニメーションになり、各フレームの長さは duration / n です。jump-start は最初のフレームを保持し、jump-end は最後のフレームを保持します。step-start/step-end はその簡略形です。

Qease、ease-in、ease-out、linear の違いは何ですか？それぞれいつ使いますか？

Aease（デフォルト）は初めが速く終わりが遅く、汎用的に使いやすい選択肢です。ease-in は初めが遅く加速するため、画面から去る要素に向いています。ease-out は初めが速く減速するため、ポップアップやカードが滑り込むなど、画面に入る要素に向いています。ease-in-out は両端が遅く、呼吸灯のようなループ効果に向いています。linear は常に一定速度で、回転やプログレスバーに最適です。