例
トランジションエフェクトの速度曲線を変更します。
document.getElementById("myDIV").style.transitionTimingFunction = "linear";
»それを自分で試してみてください 定義と使用法
transitionTimingFunctionプロパティは、遷移効果の速度曲線を指定します。
このプロパティは、トランジションエフェクトはその期間にわたって速度を変更することができます。
ブラウザのサポート
transitionTimingFunctionプロパティは、Internet Explorer 10、Firefoxの、オペラ座、Chromeでサポートされています。
Safariは、代替、WebkitTransitionTimingFunctionプロパティをサポートしています。
注意：transitionTimingFunctionプロパティは、Internet Explorer 9およびそれ以前のバージョンではサポートされていません。
構文
transitionTimingFunctionプロパティを返します：
object .style.transitionTimingFunction transitionTimingFunctionプロパティを設定します。
object .style.transitionTimingFunction ="ease|linear|ease-in|ease-out|ease-in-out|cubic-bezier()|
initial|inherit"
プロパティ値
| 値 | 説明 |
|---|---|
| ease | デフォルト値。 スロースタートとトランジションエフェクトを指定し、その後、高速で、ゆっくり終了(equivalent to cubic- bezier(0.25,0.1,0.25,1) ） |
| linear | 最初から最後まで同じ速度でトランジションエフェクトを指定(equivalent to cubic- bezier(0,0,1,1) ） |
| ease-in | スロースタートとトランジションエフェクトを指定し（cubic-に相当bezier(0.42,0,1,1) |
| ease-out | （cubic-に相当遅い端部とトランジションエフェクトを指定bezier(0,0,0.58,1) |
| ease-in-out | スロースタートとエンド（cubic-に相当してトランジションエフェクトを指定bezier(0.42,0,0.58,1) |
| cubic- bezier( n , n , n , n ) | 立方ベジエ機能に独自の値を定義します。 可能な値は0から1までの数値です |
| initial | このプロパティがデフォルト値に設定します。 最初の記事を読みます |
| inherit | その親要素からこのプロパティを継承します。 継承についての記事を読みます |
技術的な詳細
| デフォルト値： | 楽 |
|---|---|
| 戻り値： | 要素の遷移タイミング機能性を表す文字列、 |
| CSSのバージョン | CSS3 |
関連ページ
CSSリファレンス： transition-timing-function property
<スタイルオブジェクト