CSS transition-timing-function アニメーション| CSS:スタイルシート 関数 要素 使い方・書き方 例 CSS サンプル
ページコンテンツ
transition-timing-function CSS プロパティとは
トピック：トランジションエフェクトの速度カーブを指定する事ができる このプロパティを使用すると、トランジションエフェクトの持続時間を変更することができる
プロパティ transition-timing-function
実例 コード 1
サンプル コードを試す div {
transition-timing-function: linear;
}
/* 開始から終了まで同じスピードのトランジションエフェクト */ プロパティ
| デフォルト値・初期値 : | ease |
|---|---|
| 適用対象 : | 全要素、::before / ::after 疑似要素 |
| 継承 : | 不可 |
| メディア : | interactive |
| 計算値 : | 指定値 |
CSS Version | CSS3 |
| Animation type : | discrete |
| JavaScript 構文 | object.style.transitionTimingFunction="linear" |
| 正規順序 : | 形式文法で定義される一意のあいまいでない順序 |
| CSSの構文 | transition-timing-function: linear |ease |ease-in |ease-out |ease-in-out |step-start |step-end |steps(int,start |end) |cubic-bezier(n,n,n,n) |initial |inherit; |
- 値：
<timing-function>各々の <timing-function> は transition-property で指定された、トランジションを行うプロパティに対応するタイミング関数を表示することができる。| 値 | 説明 |
|---|---|
| ease | デフォルト値。スロースタートでトランジションエフェクトを指定してから高速化し、ゆっくりと終了します（キュービックベジエ（0.25,0.1,0.25,1）に相当） |
| linear | 開始から終了まで同じ速度のトランジションエフェクトを指定します（キュービックベジェ（0,1,1,1）に相当）。 |
| ease-in | スロースタートでのトランジション効果を指定します（立方体ベジエ（0.42,0,1,1）に相当）。 |
| ease-out | スローエンドのトランジションエフェクトを指定します（立方体ベジェ（0,0,0.58,1）に相当）。 |
| ease-in-out | スロースタートとエンドでトランジションエフェクトを指定します（キュービックベジエ（0.42,0,0.58,1）に相当） |
| step-start | ステップに相当（1、start） |
| step-end | ステップに相当（1、end） |
| steps（int、start | end） | 2つのパラメーターを持つステッピング関数を指定します。最初のパラメータは、関数の間隔の数を指定します。正の整数（0より大きい値）でなければなりません。オプションの2番目のパラメータは、値 "start"または "end"のいずれかであり、区間内で値の変化が発生する点を指定します。2番目のパラメータが省略された場合は、値 "end"が与えられます。 |
立方体ベジェ（n、n、n、n） | 立方体ベジェ関数で独自の値を定義します。可能な値は0〜1の数値です |
| initial | このプロパティをデフォルト値に設定します。 |
| inherit | 親要素からこのプロパティを継承します。 |
サポートするデスクトップ ブラウザ対応・互換性
| 機能 | Chrome | Firefox | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| 基本サポート | 26 | 4.0 (2.0)-moz 16.0 (16.0)[1] | 10 | 11.6-o 12.10 # | (有)-webkit |
サポートするモバイル ブラウザ対応・互換性
| 機能 | Android | Chrome for Android | Firefox Mobile | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|
| 基本サポート | (有)-webkit | (有)-webkit | 4.0 (2.0)-moz 16.0 (16.0)[1] | 不明 | 不明 | (有)-webkit |
