transition-timing-function

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

概要

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

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

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

構文

transition-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

参考情報

Document Tags and Contributors

Contributors to this page: ethertank, yyss
最終更新者: ethertank,
サイドバーを隠す