CSS の animation-timing-function
プロパティは、アニメーションがそれぞれの周期の中でどのように進行するかを設定します。
このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 https://github.com/mdn/interactive-examples をクローンしてプルリクエストを送信してください。
アニメーションのプロパティすべてを一度に設定するには、一括指定プロパティである 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
プロパティで指定したアニメーションに割り当てられますが、いくつあるかによって異なる方法で割り当てられます。詳しくは、複数のアニメーションプロパティ値の設定を参照してください。
形式文法
<timing-function>#where
<timing-function> = linear | <cubic-bezier-timing-function> | <step-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>[, <step-position>]?)where
<step-position> = jump-start | jump-end | jump-none | jump-both | start | end
例
CSS アニメーションを参照してください。
仕様書
仕様書 | 状態 | 備考 |
---|---|---|
CSS Animations animation-timing-function の定義 |
草案 | 初回定義 |
初期値 | ease |
---|---|
適用対象 | すべての要素、::before / ::after 疑似要素 |
継承 | なし |
メディア | 視覚 |
計算値 | 指定値 |
アニメーションの種類 | 個別 |
正規順序 | 形式文法で定義される一意のあいまいでない順序 |
ブラウザーの対応
デスクトップ | モバイル | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
animation-timing-function | Chrome
完全対応
43
| Edge
完全対応
12
| Firefox
完全対応
16
| IE 完全対応 10 | Opera
完全対応
30
| Safari
完全対応
9
| WebView Android
完全対応
43
| Chrome Android
完全対応
43
| Firefox Android
完全対応
16
| Opera Android
完全対応
30
| Safari iOS
完全対応
9
| Samsung Internet Android
完全対応
4.0
|
jump- keywords for steps() | Chrome 完全対応 77 | Edge 未対応 なし | Firefox 完全対応 65 | IE 未対応 なし | Opera 未対応 なし | Safari 未対応 なし | WebView Android 完全対応 77 | Chrome Android 完全対応 77 | Firefox Android 完全対応 65 | Opera Android 未対応 なし | Safari iOS 未対応 なし | Samsung Internet Android 未対応 なし |
凡例
- 完全対応
- 完全対応
- 未対応
- 未対応
- ユーザーが明示的にこの機能を有効にしなければなりません。
- ユーザーが明示的にこの機能を有効にしなければなりません。
- 使用するには、ベンダー接頭辞または異なる名前が必要です。
- 使用するには、ベンダー接頭辞または異なる名前が必要です。
関連情報
- CSS アニメーションの使用
- JavaScript
AnimationEvent
API