CSS 参考手册

CSS @规则(RULES)

CSS 属性大全

CSS unicode-bidi 属性 CSS3 transition-property 属性

CSS3 transition-timing-function属性の使用方法及び例

transition-timing-function属性は、CSS属性を使用してトランジション効果の速度を指定します。この属性は、トランジション効果の持続時間の速度を変更するトランジション効果を許可します。

以下の表は、この属性の使用方法とバージョン履歴、およびjavascriptスクリプトでの属性の使用法を示しています。

デフォルト値：	ease
適用範囲：	すべての要素::beforeと::after 疑似要素
継承：	ありません
アニメーション可能：	いいえ。参照してくださいアニメーション属性。
バージョン：	CSS3の新しい機能
JavaScriptの構文：	オブジェクト.style.transitionTimingFunction="ease"-in"

transition-timing-functionの使用法

この属性の構文は以下の通りです：

transition-timing-function:　linear　|　ease　|　ease-in　|　ease-out　|　ease-in-out　|　cubic-bezier(n,n,n,n)　|　initial　|　inherit

以下の例では、transitionの使用方法を示しています。-timing-function属性。

例

button　{
　　　　background:　#fd7c2a;
　　　　/*　Safari用　3.0+　*/
　　　　-webkit-transition-property:　background;
　　　　-webkit-transition-duration:　2s;
　　　　　　-webkit-transition-timing-function:　linear;
　　　　
　　　　transition-property:　background;
　　　　transition-duration:　2s;
　　　　　　transition-timing-function:　linear;
}
button:hover　{
　　　　background:　#3cc16e;
}

テストを試してみる‹/›

属性値

以下のテーブルは、この属性の値を説明しています。

値	説明
linear	初期状態から最終状態まで恒常速度で过渡するように指定します。
ease	インとアウトと似ていますが、始めに急速に加速し、中間近くから減速し始めます。
ease-in	过渡が遅く始まり、次第に速くなり、最終状態に達すると突然停止するように指定します。
ease-out	过渡が速く始まり、最終状態に近づくと徐々に遅くなるように指定します。
ease-in-out	最終状態に过渡する際に、过渡が最初に遅い、次に速くなり、最後に遅くなるように指定します。
cubic-bezier(n,n,n,n)	三次ベ塞尔曲線を定義します。速度曲線とも呼ばれます。可能な値は0から1の間の数値。
initial	この属性をデフォルト値に設定します。
inherit	指定された場合、関連する要素は親要素のtransitionを使用します。-timing-functionの属性値。

ブラウザ互換性

transition-timing-function属性のブラウザの互換性を確認します。以下のテーブルには、その属性をサポートするブラウザの最低バージョン番号が示されています。すべての主要ブラウザはこの属性をサポートしています。

	Firefox 4+ ^-moz-、16 + Google Chrome 4+ ^-webkit-、26 + Internet Explorer 10+ Apple Safari 3。1+ ^-webkit-、6。1+ Opera 10。5+ ^-o-、12。1+

さらに詳しく

以下のチュートリアルを参照してください：CSS3 Transitions。

CSS unicode-bidi 属性 CSS3 transition-property 属性