CSSanimation-timing-function プロパティは、 CSS アニメーションがそれぞれの周期の中でどのように進行するかを指定します。

アニメーションのプロパティすべてを一度に設定するには、一括指定プロパティである animation プロパティを使用すると便利です。

構文

/* キーワード値 */
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: frames(10);

/* 複数のアニメーション */
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;

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

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

<timing-function>
animation-name で定められた、アニメーションに対応するタイミング関数。

メモ: animation-* プロパティにコンマ区切りで複数の値を指定した場合、 animation-name プロパティで指定したアニメーションに割り当てられますが、いくつあるかによって異なる方法で割り当てられます。詳しくは、複数のアニメーションプロパティ値の設定を参照してください。

形式文法

<single-timing-function>#

where
<single-timing-function> = linear | <cubic-bezier-timing-function> | <step-timing-function> | <frames-timing-function>

where
<cubic-bezier-timing-function> = ease | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)
<step-timing-function> = step-start | step-end | steps(<integer>[, [ start | end ] ]?)
<frames-timing-function> = frames(<integer>)

CSS アニメーションを参照してください。

仕様書

仕様書 状態 備考
CSS Animations
animation-timing-function の定義
草案 初回定義

初期値ease
適用対象全要素、::before / ::after 疑似要素
継承なし
メディアvisual
計算値指定値
アニメーションの種類個別
正規順序形式文法で定義される一意のあいまいでない順序

ブラウザーの対応

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応

43

あり -webkit-

12

12 -webkit-

16

49 -webkit-

44 -webkit- 1

5 -moz-

10

30

15 -webkit-

12.1 — 15

12 — 15 -o-

あり

4 -webkit-

機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応

あり

あり -webkit-

43

あり -webkit-

あり

あり -webkit-

16

49 -webkit-

44 -webkit- 1

5 -moz-

30

15 -webkit-

12.1 — 14

12 — 14 -o-

あり

あり -webkit-

4.0

あり -webkit-

1. From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.

関連情報

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, mrstork, teoli, ethertank, yyss, FredB
最終更新者: mfuji09,