transition-timing-function

これは実験段階の機能です。
この機能は複数のブラウザで開発中の状態にあります。各ブラウザで用いるために、適切なベンダー接頭辞が必要な場合があります。互換性テーブルをチェックしてください。また、実験段階の機能の構文と挙動は、仕様変更に伴い各ブラウザの将来のバージョンで変更になる可能性があることに注意してください。

概要

transition-timing-function CSS プロパティは、トランジション効果の作用を受ける CSS プロパティの、中間状態の値を算出する方法を記述するために使用されます。このプロパティは加速曲線を定義するもので、それによりトランジション実行中の値の変更速度を操作することができます。

この加速曲線は、トランジションが行われるプロパティごとに 1 つの <timing-function> を用いて定義されます。

このプロパティには複数のタイミング関数を指定することができます。それぞれのタイミング関数は、マスターリストを務める transition-property プロパティの指定値で対応するプロパティに適用されます。指定した関数の数がマスターリストで指定したプロパティの数より少ない場合は、不足している値は初期値 (ease) になります。また関数の数が多い場合は、リストを適切な長さに切り詰めます。どちらの場合も、CSS の宣言として妥当です。

 

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

 

構文

 

transition-timing-function: <timing-function> [, <timing-function>]*

 

各々の <timing-function>transition-property で指定された、トランジションを行うプロパティに対応するタイミング関数を表します。

 

 

CSS transitions の記事に、CSS transitions の例がいくつかあります。

 

仕様書

 

 

ブラウザの互換性

 

ブラウザ 最低バージョン
Internet Explorer 10
Firefox (Gecko) 4.0 (2.0) -moz
Opera ---
Safari (WebKit) 3.1 -webkit

 

参考情報

 

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

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