CSS3

プロパティ

transition-timing-function

→●、mdn

時間的変化：遷移の算出方法。

transition-timing-function プロパティは、遷移の間の中途の値がどの時点で利用されるかを算出する方法を述べる。これにより、その間の遷移の速度を変化させられるようになる。これらの効果は、よく easing 関数と呼ばれる。【“easing 関数”は、計時関数の別称（より汎化した呼称）。】

計時関数は、[CSS-EASING-1] にて別に定義される。その入力進捗値には、所要時間に対する経過した時間の割合が利用される。出力進捗値は、当のプロパティ値を補間するときの p 値を与える（§ 遷移の適用 を見よ）。

<easing-function>

＝linear
| <cubic-bezier-easing-function>
| <step-easing-function>

線型 easing 関数

linear

<DIV style=" border:1px solid black; width:200px; height:50px;
 position:relative;
">
 <SPAN id=IdlinearSpan style="border:1px solid red;
  position:absolute;
  left:0;
  transition:left 3s linear 0s;
 ">テスト</SPAN>
</DIV>
<BUTTON onclick="IdlinearSpan.style.left='200px'">セット</BUTTON>

3 次ベジェ easing 関数

easing 関数として利用される 3 次ベジェ曲線。 曲線の形状は、制御点 P1、P2 の所在により決定される。入力進捗値／出力進捗値 は、曲線の x 値／y 値 として働く。

<cubic-bezier-easing-function> ●

＝ease
| ease-in
| ease-out
| ease-in-out
| cubic-bezier(<number[0,1]>, <number>, <number[0,1]>, <number>)

ease

cubic-bezier(0.25, 0.1, 0.25, 1) に等価。

<DIV style=" border:1px solid black; width:200px; height:50px;
 position:relative;
">
 <SPAN id=IdeaseSpan style="border:1px solid red;
  position:absolute;
  left:0;
  transition:left 3s ease 0s;
 ">テスト</SPAN>
</DIV>
<BUTTON onclick="IdeaseSpan.style.left='200px'">セット</BUTTON>

ease-in

cubic-bezier(0.42, 0, 1, 1) に等価。

<DIV style=" border:1px solid black; width:200px; height:50px;
 position:relative;
">
 <SPAN id=IdeaseinSpan style="border:1px solid red;
  position:absolute;
  left:0;
  transition:left 3s ease-in 0s;
 ">テスト</SPAN>
</DIV>
<BUTTON onclick="IdeaseinSpan.style.left='200px'">セット</BUTTON>

ease-out

cubic-bezier(0, 0, 0.58, 1) に等価。

<DIV style=" border:1px solid black; width:200px; height:50px;
 position:relative;
">
 <SPAN id=IdeaseoutSpan style="border:1px solid red;
  position:absolute;
  left:0;
  transition:left 3s ease-out 0s;
 ">テスト</SPAN>
</DIV>
<BUTTON onclick="IdeaseoutSpan.style.left='200px'">セット</BUTTON>

ease-in-out

cubic-bezier(0.42, 0, 0.58, 1) に等価。

<DIV style=" border:1px solid black; width:200px; height:50px;
 position:relative;
">
 <SPAN id=IdeaseinoutSpan style="border:1px solid red;
  position:absolute;
  left:0;
  transition:left 3s ease-in-out 0s;
 ">テスト</SPAN>
</DIV>
<BUTTON onclick="IdeaseinoutSpan.style.left='200px'">セット</BUTTON>

階段 easing 関数

<step-easing-function> ●

＝step-start
| step-end
| steps(<integer>[, <step-position>]?)

step-start

steps(1, start) に算出される。

<DIV style=" border:1px solid black; width:200px; height:50px;
 position:relative;
">
 <SPAN id=IdstepstartSpan style="border:1px solid red;
  position:absolute;
  left:0;
  transition:left 3s step-start 0s;
 ">テスト</SPAN>
</DIV>
<BUTTON onclick="IdstepstartSpan.style.left='200px'">セット</BUTTON>

step-end

steps(1, end) に算出される。

<DIV style=" border:1px solid black; width:200px; height:50px;
 position:relative;
">
 <SPAN id=IdstependSpan style="border:1px solid red;
  position:absolute;
  left:0;
  transition:left 3s step-end 0s;
 ">テスト</SPAN>
</DIV>
<BUTTON onclick="IdendSpan.style.left='200px'">セット</BUTTON>

テスト