これは実験段階の機能です。
この機能は複数のブラウザで開発中の状態にあります。各ブラウザで用いるために、適切なベンダー接頭辞が必要な場合があります。互換性テーブルをチェックしてください。また、実験段階の機能の構文と挙動は、仕様変更に伴い各ブラウザの将来のバージョンで変更になる可能性があることに注意してください。
概要
animation-timing-function CSS プロパティは、それぞれのアニメーション周期でどのような CSS アニメーションを実行するかを指定します。指定できる値は、1 つまたは複数の <timing-function> です。
キーフレームによるアニメーションでは、timing-function はアニメーション全体ではなくキーフレーム間に適用されます。言い換えると、timing-function はキーフレームの始まりから終わりまでの間に適用されます。
キーフレームのブロック内で定義されたアニメーションタイミング関数は、そのキーフレームに対して適用されます。一方、キーフレームでタイミング関数が指定されていない場合は、アニメーション全体に対して指定されたタイミング関数が使用されます。
アニメーション関連のプロパティをまとめて設定できる短縮プロパティである animation プロパティを使用すると便利でしょう。
| 初期値 | ease |
|---|---|
| 適用対象 | 全要素、::before / ::after 疑似要素 |
| 継承 | 不可 |
| メディア | visual |
| 計算値 | 指定値 |
| アニメーションの可否 | 不可 |
| 正規順序 | 形式文法で定義される一意のあいまいでない順序 |
構文
Formal grammar: <timing-function> [, <timing-function>]*
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: cubic-bezier(0.1, 0.7, 1.0, 0.1) animation-timing-function: step-start animation-timing-function: step-stop animation-timing-function: steps(4, end) animation-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1)
各 <timing-function> は、animation-property で指定されたアニメーションのプロパティに対応するタイミング関数を表します。
例示
CSS アニメーションの頁を参照してください。
値
- <timing-function>
- 各々の
<timing-function>は、animation-propertyで指定されたアニメーションのプロパティに対応するタイミング関数を表します。
仕様
| 仕様書 | 策定状況 | コメント |
|---|---|---|
| CSS Animations Level 3 | 草案 |
ブラウザ実装状況
| 機能 | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|
| 基本サポート | (有) -webkit | 5.0 (5.0) -moz 16.0 (16.0) |
10 | 12 -o 12.5 # |
4.0-webkit |
| 機能 | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| 基本サポート | (有) -webkit | 5.0 (5.0) -moz 16.0 (16.0) |
? | ? | ? |