CSS

transition-timing-function

transition-timing-functionはバックリ言ってしまうとイージングです。ease、linear、ease-in、ease-out、ease-in-outがデフォルトで設定されているイージングで、細かく設定する時はcubic-bezierを使用します。

ease	開始と終わりが滑らかになります。初期値です。
linear	一定の動き
ease-in	開始がゆっくり
ease-out	終わりがゆっくり
ease-in-out	ゆっくり開始してゆっくり終わります。
cubic-bezier	cubic-bezierは3次ベジェ曲線で指定します。

用例

transition-property:プロパティ;
transition-duration:適応されるまでの時間の値;
transition-timing-function:イージングの値;

一般的な用例

div.mt{
  margin-top:0;
  transition-property:margin-top;
  transition-duration:.6s;
  transition-timing-function:cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
div.mt:hover{
  margin-top:50px;
}